index.tsx 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import {
  2. StyleSheet,
  3. View
  4. } from "react-native";
  5. import {
  6. setupNCoreUIKit,
  7. NCoreUIKitTheme,
  8. Button,
  9. Text
  10. } from "ncore-ui-kit-mobile";
  11. import {
  12. useFonts
  13. } from "expo-font";
  14. const NCoreUIKitBase = setupNCoreUIKit({
  15. initialSelectedGapPropagation: "compact",
  16. initialSelectedTheme: "dark"
  17. });
  18. const App = () => {
  19. const {
  20. colors
  21. } = NCoreUIKitTheme.useContext();
  22. return <View
  23. style={[
  24. styles.container,
  25. {
  26. backgroundColor: colors.content.container.default
  27. }
  28. ]}
  29. >
  30. <Text>Result: </Text>
  31. <Button
  32. onPress={() => {
  33. }}
  34. type="success"
  35. title="Ahmet"
  36. variant="ghost"
  37. />
  38. </View>;
  39. };
  40. const ContextAPI = () => {
  41. /* eslint-disable @typescript-eslint/no-require-imports */
  42. const [loaded] = useFonts({
  43. "Geist-ExtraLight": require("./assets/fonts/Geist-ExtraLight.ttf"),
  44. "Geist-ExtraBold": require("./assets/fonts/Geist-ExtraBold.ttf"),
  45. "Geist-SemiBold": require("./assets/fonts/Geist-SemiBold.ttf"),
  46. "Geist-Regular": require("./assets/fonts/Geist-Regular.ttf"),
  47. "Geist-Medium": require("./assets/fonts/Geist-Medium.ttf"),
  48. "Geist-Black": require("./assets/fonts/Geist-Black.ttf"),
  49. "Geist-Light": require("./assets/fonts/Geist-Light.ttf"),
  50. "Geist-Bold": require("./assets/fonts/Geist-Bold.ttf"),
  51. "Geist-Thin": require("./assets/fonts/Geist-Thin.ttf")
  52. });
  53. if (!loaded) return null;
  54. return <NCoreUIKitBase.Provider>
  55. <App/>
  56. </NCoreUIKitBase.Provider>;
  57. };
  58. const styles = StyleSheet.create({
  59. container: {
  60. justifyContent: "center",
  61. alignItems: "center",
  62. flex: 1
  63. }
  64. });
  65. export default ContextAPI;