Updated example

examples/uikits/package.json

@@ -10,7 +10,7 @@
  "expo-asset": "^7.0.0",
  "expo-blur": "^7.0.0",
  "expo-camera": "^7.0.0",
- "expo-constants": "^7.0.0",
+ "expo-constants": "^7.0.1",
  "expo-file-system": "^7.0.0",
  "expo-font": "^7.0.0",
  "expo-location": "^7.0.0",
@@ -27,7 +27,7 @@
  "react-native": "^0.55",
  "react-native-elements": "^1.1.0",
  "react-native-paper": "^2.13.0",
- "react-native-ui-kitten": "^3.1.2",
+ "react-native-ui-kitten": "^4.2.0",
  "react-native-vector-icons": "^6.4.2",
  "react-native-web": "^0.11.1",
  "react-native-web-hooks": "^1.0.2"

examples/uikits/src/components/JSONView.js

@@ -0,0 +1,18 @@
+import React, { useEffect, useState } from 'react'
+import { ScrollView, Text } from 'react-native'
+
+export default function JSONView({ json }) {
+ return (
+ <ScrollView style={{ flex: 1, overflow: 'scroll' }}>
+ <Text
+ style={{
+ backgroundColor: 'transparent',
+ fontSize: 15,
+ color: '#000',
+ }}
+ >
+ {JSON.stringify(json, null, 2)}
+ </Text>
+ </ScrollView>
+ )
+}

examples/uikits/src/components/expo/ExpoBlurExample.js

@@ -0,0 +1,41 @@
+import { BlurView } from 'expo-blur'
+import React, { useEffect, useState } from 'react'
+import { Image, StyleSheet, Text } from 'react-native'
+
+import Example from '../example'
+
+const IMAGE = { uri: 'https://i.ytimg.com/vi/y588qNiCZZo/maxresdefault.jpg' }
+
+export default function ExpoBlurExample() {
+ return (
+ <Example title="expo-blur">
+ <Image source={IMAGE} style={styles.image} />
+ <BlurView style={styles.blur}>
+ <Text style={styles.text}>Blur View</Text>
+ </BlurView>
+ </Example>
+ )
+}
+
+const styles = StyleSheet.create({
+ image: {
+ flex: 1,
+ height: 300,
+ },
+ blur: {
+ position: 'absolute',
+ top: '50%',
+ left: 0,
+ bottom: 0,
+ right: 0,
+ padding: 15,
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 5,
+ },
+ text: {
+ backgroundColor: 'transparent',
+ fontSize: 15,
+ color: '#fff',
+ },
+})

examples/uikits/src/components/expo/ExpoCameraExample.js

@@ -0,0 +1,14 @@
+import { Camera } from 'expo-camera'
+import React, { useEffect, useState } from 'react'
+
+import Example from '../example'
+
+export default function ExpoCameraExample() {
+ return (
+ <Example title="expo-camera">
+ <Camera
+ style={[{ alignItems: 'center', borderRadius: 5, minHeight: 300 }]}
+ />
+ </Example>
+ )
+}

examples/uikits/src/components/expo/ExpoConstantsExample.js

@@ -0,0 +1,21 @@
+import Constants from 'expo-constants'
+import React, { useEffect, useState } from 'react'
+import { Text } from 'react-native'
+
+import Example from '../example'
+
+export default function ExpoConstantsExample() {
+ return (
+ <Example title="expo-constants">
+ <Text
+ style={{
+ backgroundColor: 'transparent',
+ fontSize: 15,
+ color: '#000',
+ }}
+ >
+ {JSON.stringify(Constants, null, 2)}
+ </Text>
+ </Example>
+ )
+}

examples/uikits/src/components/expo/ExpoFontExample.js

@@ -0,0 +1,39 @@
+import * as Font from 'expo-font'
+import React, { useEffect, useState } from 'react'
+import { Text } from 'react-native'
+
+import Example from '../example'
+
+function ExpoFontExample() {
+ const [loaded, setLoaded] = useState(false)
+
+ async function loadFontAsync() {
+ await Font.loadAsync({
+ 'retro-regular': require('../../assets/retro-regular.ttf'),
+ })
+ setLoaded(true)
+ }
+
+ useEffect(() => {
+ loadFontAsync()
+ }, [])
+
+ return (
+ <Example title="expo-font" style={{ justifyContent: 'space-around' }}>
+ {loaded && (
+ <Text
+ style={{
+ fontFamily: 'retro-regular',
+ backgroundColor: 'transparent',
+ fontSize: 56,
+ color: '#000',
+ }}
+ >
+ Cool new font
+ </Text>
+ )}
+ </Example>
+ )
+}
+
+export default ExpoFontExample

examples/uikits/src/components/expo/ExpoLocationExample.js

@@ -0,0 +1,26 @@
+import * as Location from 'expo-location'
+import React, { useEffect, useState } from 'react'
+import { Button } from 'react-native'
+
+import Example from '../example'
+import JSONView from '../JSONView'
+
+export default function ExpoLocationExample() {
+ const [item, setItem] = useState(null)
+
+ return (
+ <Example title="expo-location" style={{ justifyContent: 'space-around' }}>
+ <Button
+ title="Get Location"
+ onPress={async () => {
+ try {
+ setItem(await Location.getCurrentPositionAsync())
+ } catch ({ message }) {
+ alert('Something went wrong: ' + message)
+ }
+ }}
+ />
+ {item && <JSONView json={item} />}
+ </Example>
+ )
+}

examples/uikits/src/components/expo/ExpoPermissionsExample.js

@@ -0,0 +1,59 @@
+import * as Permissions from 'expo-permissions'
+import React, { useEffect, useState } from 'react'
+import { Button, ScrollView, Text, View } from 'react-native'
+
+import Example from '../example'
+
+const permissions = [
+ ['CAMERA', Permissions.CAMERA],
+ ['AUDIO_RECORDING', Permissions.AUDIO_RECORDING],
+ ['LOCATION', Permissions.LOCATION],
+ ['USER_FACING_NOTIFICATIONS', Permissions.USER_FACING_NOTIFICATIONS],
+ ['NOTIFICATIONS', Permissions.NOTIFICATIONS],
+ ['CONTACTS', Permissions.CONTACTS],
+ ['SYSTEM_BRIGHTNESS', Permissions.SYSTEM_BRIGHTNESS],
+ ['CAMERA_ROLL', Permissions.CAMERA_ROLL],
+ ['CALENDAR', Permissions.CALENDAR],
+ ['REMINDERS', Permissions.REMINDERS],
+]
+
+export default function PermissionsExample() {
+ return (
+ <Example title="expo-permissions">
+ <ScrollView
+ style={{ flex: 1 }}
+ contentContainerStyle={{ alignItems: 'stretch', flex: 1 }}
+ >
+ {permissions.map(([permissionName, permissionType]) => (
+ <View style={{ marginBottom: 12 }}>
+ <Text style={{ marginBottom: 8 }}>{permissionName}</Text>
+ <View
+ style={{
+ flexDirection: 'row',
+ flex: 1,
+ justifyContent: 'space-around',
+ }}
+ >
+ <Button
+ style={{ marginVertical: 4 }}
+ key={permissionType}
+ onPress={async () => {
+ alert((await Permissions.getAsync(permissionType)).status)
+ }}
+ title={`Get Status`}
+ />
+ <Button
+ style={{ marginVertical: 4 }}
+ key={permissionType}
+ onPress={async () => {
+ alert((await Permissions.askAsync(permissionType)).status)
+ }}
+ title={`Request`}
+ />
+ </View>
+ </View>
+ ))}
+ </ScrollView>
+ </Example>
+ )
+}