Update NCL to use new packages

expo · May 27, 2020 · bc1c3f3 · bc1c3f3
1 parent 9392d20
commit bc1c3f3
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 102 deletions.
diff --git a/apps/native-component-list/package.json b/apps/native-component-list/package.json
@@ -17,6 +17,8 @@
     "@react-native-community/masked-view": "0.1.6",
     "@react-native-community/netinfo": "5.9.0",
     "@react-native-community/segmented-control": "1.6.1",
+    "@react-native-community/picker": "^1.5.1",
+    "@react-native-community/slider": "3.0.0-rc.2",
     "@react-native-community/viewpager": "3.3.0",
     "@react-navigation/web": "2.0.0-alpha.0",
     "date-format": "^2.0.0",

diff --git a/apps/native-component-list/src/screens/AV/Slider.tsx b/apps/native-component-list/src/screens/AV/Slider.tsx
@@ -1,3 +1,3 @@
-import { Slider } from 'react-native';
+import Slider from '@react-native-community/slider';
 
 export default Slider;
diff --git a/apps/native-component-list/src/screens/AppleAuthenticationScreen.tsx b/apps/native-component-list/src/screens/AppleAuthenticationScreen.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import Slider from '@react-native-community/slider';
 import { Subscription } from '@unimodules/core';
 import * as AppleAuthentication from 'expo-apple-authentication';
-import { Alert, AsyncStorage, ScrollView, StyleSheet, View, Text, Button, Slider } from 'react-native';
+import React from 'react';
+import { Alert, AsyncStorage, ScrollView, StyleSheet, View, Text, Button } from 'react-native';
 
 import MonoText from '../components/MonoText';
 

diff --git a/apps/native-component-list/src/screens/BrightnessScreen.tsx b/apps/native-component-list/src/screens/BrightnessScreen.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
-import { ScrollView, Text, View, Slider } from 'react-native';
+import Slider from '@react-native-community/slider';
 import * as Brightness from 'expo-brightness';
 import * as Permissions from 'expo-permissions';
-import HeadingText from '../components/HeadingText';
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
 import Button from '../components/Button';
+import HeadingText from '../components/HeadingText';
 
 interface State {
   initBrightness: { [type: string]: number };

diff --git a/apps/native-component-list/src/screens/GL/GLHeadlessRenderingScreen.tsx b/apps/native-component-list/src/screens/GL/GLHeadlessRenderingScreen.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import Slider from '@react-native-community/slider';
+import { Asset } from 'expo-asset';
+import * as FileSystem from 'expo-file-system';
 import * as GL from 'expo-gl';
 import { GLView } from 'expo-gl';
-import * as FileSystem from 'expo-file-system';
-import { Asset } from 'expo-asset';
-import { Image, Slider, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
 
 import exampleImage from '../../../assets/images/example3.jpg';
 
@@ -175,7 +176,7 @@ export default class GLHeadlessRenderingScreen extends React.PureComponent<{}, S
     this.setState({ contrast }, () => {
       this.draw();
     });
-  }
+  };
 
   render() {
     const { contrast, snapshot } = this.state;
@@ -197,7 +198,10 @@ export default class GLHeadlessRenderingScreen extends React.PureComponent<{}, S
             />
           )}
         </View>
-        <Text style={styles.sliderHeader}>{`Contrast: ${parseInt(String(contrast * 100), 10)}%`}</Text>
+        <Text style={styles.sliderHeader}>{`Contrast: ${parseInt(
+          String(contrast * 100),
+          10
+        )}%`}</Text>
         <Slider
           value={contrast}
           step={0.01}

diff --git a/apps/native-component-list/src/screens/Image/AnimationBar.tsx b/apps/native-component-list/src/screens/Image/AnimationBar.tsx
@@ -1,7 +1,7 @@
 import { MaterialIcons } from '@expo/vector-icons';
-//import Slider from '@react-native-community/slider';
+import Slider from '@react-native-community/slider';
 import * as React from 'react';
-import { StyleSheet, View, Animated, TouchableOpacity, Text, Slider } from 'react-native';
+import { StyleSheet, View, Animated, TouchableOpacity, Text } from 'react-native';
 
 import Colors from '../../constants/Colors';
 

diff --git a/apps/native-component-list/src/screens/LottieScreen.tsx b/apps/native-component-list/src/screens/LottieScreen.tsx
@@ -1,47 +1,31 @@
+import { Picker } from '@react-native-community/picker';
+import Slider from '@react-native-community/slider';
+import Animation from 'lottie-react-native';
 import React from 'react';
 import {
   Animated,
   Button,
-  Picker,
   Platform,
   ScrollView,
-  Slider,
   StyleSheet,
   Switch,
   Text,
   View,
 } from 'react-native';
-import Animation from 'lottie-react-native';
 
 const makeExample = (name: string, getJson: () => any) => ({ name, getJson });
 const EXAMPLES = [
-  makeExample('Hamburger Arrow', () =>
-    require('../../assets/animations/HamburgerArrow.json')
-  ),
-  makeExample('Line Animation', () =>
-    require('../../assets/animations/LineAnimation.json')
-  ),
-  makeExample('Lottie Logo 1', () =>
-    require('../../assets/animations/LottieLogo1.json')
-  ),
-  makeExample('Lottie Logo 2', () =>
-    require('../../assets/animations/LottieLogo2.json')
-  ),
+  makeExample('Hamburger Arrow', () => require('../../assets/animations/HamburgerArrow.json')),
+  makeExample('Line Animation', () => require('../../assets/animations/LineAnimation.json')),
+  makeExample('Lottie Logo 1', () => require('../../assets/animations/LottieLogo1.json')),
+  makeExample('Lottie Logo 2', () => require('../../assets/animations/LottieLogo2.json')),
   makeExample('Lottie Walkthrough', () =>
     require('../../assets/animations/LottieWalkthrough.json')
   ),
-  makeExample('Pin Jump', () =>
-    require('../../assets/animations/PinJump.json')
-  ),
-  makeExample('Twitter Heart', () =>
-    require('../../assets/animations/TwitterHeart.json')
-  ),
-  makeExample('Watermelon', () =>
-    require('../../assets/animations/Watermelon.json')
-  ),
-  makeExample('Motion Corpse', () =>
-    require('../../assets/animations/MotionCorpse-Jrcanest.json')
-  ),
+  makeExample('Pin Jump', () => require('../../assets/animations/PinJump.json')),
+  makeExample('Twitter Heart', () => require('../../assets/animations/TwitterHeart.json')),
+  makeExample('Watermelon', () => require('../../assets/animations/Watermelon.json')),
+  makeExample('Motion Corpse', () => require('../../assets/animations/MotionCorpse-Jrcanest.json')),
 ].reduce<{ [key: string]: { name: string; getJson: () => any } }>(
   (acc, e) => ({
     ...acc,
@@ -52,13 +36,9 @@ const EXAMPLES = [
 
 const ExamplePicker: React.FunctionComponent<{
   value: string;
-  onChange: (value: string) => void;
+  onChange: (value: any, index?: number) => void;
 }> = ({ value, onChange }) => (
-  <Picker
-    selectedValue={value}
-    onValueChange={onChange}
-    style={styles.examplePicker}
-  >
+  <Picker selectedValue={value} onValueChange={onChange} style={styles.examplePicker}>
     {Object.values(EXAMPLES).map(({ name }) => (
       <Picker.Item key={name} label={name} value={name} />
     ))}
@@ -72,14 +52,7 @@ const PlayerControls: React.FunctionComponent<{
   onConfigChange: (config: Config) => void;
   config: Config;
   progress: Animated.Value;
-}> = ({
-  onPlayPress,
-  onResetPress,
-  onProgressChange,
-  onConfigChange,
-  config,
-  progress,
-}) => (
+}> = ({ onPlayPress, onResetPress, onProgressChange, onConfigChange, config, progress }) => (
   <View style={{ paddingBottom: 20, paddingHorizontal: 10 }}>
     <View style={{ paddingBottom: 20 }}>
       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
@@ -92,8 +65,7 @@ const PlayerControls: React.FunctionComponent<{
         flexDirection: 'row',
         justifyContent: 'space-between',
         paddingBottom: 10,
-      }}
-    >
+      }}>
       <Text>Use Imperative API:</Text>
       <View />
       <Switch
@@ -166,7 +138,7 @@ export default class LottieScreen extends React.Component<{}, State> {
         if (finished) this.forceUpdate();
       });
     }
-  }
+  };
 
   onResetPress = () => {
     if (this.state.config.imperative && this.anim) {
@@ -182,11 +154,11 @@ export default class LottieScreen extends React.Component<{}, State> {
         }
       });
     }
-  }
+  };
 
   setAnim = (anim: any) => {
     this.anim = anim;
-  }
+  };
 
   render() {
     return (
@@ -201,9 +173,7 @@ export default class LottieScreen extends React.Component<{}, State> {
               ref={this.setAnim}
               style={styles.animation}
               source={EXAMPLES[this.state.exampleName].getJson()}
-              progress={
-                this.state.config.imperative ? undefined : this.state.progress
-              }
+              progress={this.state.config.imperative ? undefined : this.state.progress}
             />
           </View>
         </View>