How to use @ui-kitten/components - 10 common examples
To help you get started, we’ve selected a few @ui-kitten/components examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
akveo / react-native-ui-kitten / src / playground / src / components / showcases / calendar / calendarStartDayOfWeek.component.tsx View on Github 
import React from 'react';
import {
Calendar,
NativeDateService,
} from '@ui-kitten/components';
const dateService = new NativeDateService('en', { startDayOfWeek: 1 });
export const CalendarStartDayOfWeekShowcase = () => {
const [date, setDate] = React.useState(null);
return (
);
};Layout,
NativeDateService,
} from '@ui-kitten/components';
const i18n = {
dayNames: {
short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
long: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
},
monthNames: {
short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dev'],
long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
},
};
const dateService = new NativeDateService('en', { i18n });
export const DatepickerCustomLocaleShowcase = () => {
const [selectedDate, setSelectedDate] = React.useState(null);
return (
);
};Calendar,
NativeDateService,
} from '@ui-kitten/components';
const i18n = {
dayNames: {
short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
long: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
},
monthNames: {
short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dev'],
long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
},
};
const dateService = new NativeDateService('en', { i18n });
export const CalendarCustomLocaleShowcase = () => {
const [date, setDate] = React.useState(null);
return (
);
};},
};
const filterCalendar: ComponentShowcaseItem = {
props: {
...defaultCalendar.props,
filter: (date: Date): boolean => {
return date.getDay() !== 0 && date.getDay() !== 6;
},
},
};
const mondayCalendar: ComponentShowcaseItem = {
props: {
...defaultCalendar.props,
dateService: new NativeDateService('en', {
startDayOfWeek: 1,
}),
},
};
const defaultSection: ComponentShowcaseSection = {
title: 'Default',
items: [
defaultCalendar,
],
};
const momentSection: ComponentShowcaseSection = {
title: 'Moment',
items: [
momentCalendar,protected setMomentLocaleData(locale: string) {
const momentLocaleData = moment.localeData(locale);
this.localeData = {
firstDayOfWeek: momentLocaleData.firstDayOfWeek(),
defaultFormat: momentLocaleData.longDateFormat('L'),
months: {
[TranslationWidth.SHORT]: momentLocaleData.monthsShort(),
[TranslationWidth.LONG]: momentLocaleData.months(),
},
days: {
[TranslationWidth.SHORT]: momentLocaleData.weekdaysShort(),
[TranslationWidth.LONG]: momentLocaleData.weekdays(),
},
};
}
} public getMonthNameByIndex(month: number, style: TranslationWidth = TranslationWidth.SHORT): string {
return this.localeData.months[style][month];
} public getMonthName(date: Moment, style: TranslationWidth = TranslationWidth.SHORT): string {
const month: number = this.getMonth(date);
return this.getMonthNameByIndex(month, style);
}return (
);
}
}
export const MainPanel = withStyles(mainPanel, (theme) => ({
mainPanel: {
height: "100%",
overflow: "hidden",
backgroundColor: theme["background-basic-color-2"],
},
placeholder: {
userSelect: "none",
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
right: 20,
textAlign: "center",
},
placeholderIcon: {
fontSize: 50,);
} else {
return (
this.renderTrace(item, style)
}
/>
);
}
}
}
export const TraceList = withStyles(traceList, (theme) => ({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
traceList: {
flex: 1,
},
trace: {
margin: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 2,
paddingLeft: 15,
paddingRight: 0,
paddingBottom: 0,<button style="{props.themedStyle.signupButton}">
No account yet?
</button>
<button style="{props.themedStyle.signInButton}">SIGN IN</button>
);
};
export const SampleAuthScreen = withStyles(SampleAuthComponent, (theme: ThemeType) => ({
container: {
flex: 1,
},
cardContainer: {
flex: 1,
flexDirection: 'row',
borderRadius: 4,
marginHorizontal: 24,
marginVertical: 24,
overflow: 'hidden',
},
cardHeader: {
flexDirection: 'row',
alignItems: 'center',
width: '25%',
paddingHorizontal: 24,@ui-kitten/components
React Native components based on Eva Design System
