diff --git a/apps/native-component-list/package.json b/apps/native-component-list/package.json
index 339bf350cd01b..a3cb8bef912b3 100644
--- a/apps/native-component-list/package.json
+++ b/apps/native-component-list/package.json
@@ -16,6 +16,8 @@
     "@react-native-community/datetimepicker": "2.2.2",
     "@react-native-community/masked-view": "0.1.6",
     "@react-native-community/netinfo": "5.5.0",
+    "@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
index e34d271e4e3d6..d62913b009818 100644
--- 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
index c35d844f6aef8..1ab0712fb373e 100644
--- 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
index 2a9018f715fc5..334aa16e3674e 100644
--- 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
index 42caaa06a187a..1e3a399227a94 100644
--- 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
index 3bcd6253c3f67..418112f528e26 100644
--- 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
index e5e9fb9c1c267..b340849ef73a7 100644
--- 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>
diff --git a/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.android.tsx b/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.android.tsx
index 66081d808e8ed..48bfb86c2eed9 100644
--- a/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.android.tsx
+++ b/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.android.tsx
@@ -1,14 +1,13 @@
+import { Picker } from '@react-native-community/picker';
+import Slider from '@react-native-community/slider';
 import React from 'react';
-
 import {
   ActivityIndicator,
   Alert,
   DrawerLayoutAndroid,
   Image,
-  Picker,
   ProgressBarAndroid,
   RefreshControl,
-  Slider,
   Switch,
   StatusBar,
   SectionList,
@@ -23,10 +22,10 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 // @ts-ignore
-import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
+import WebView from 'react-native-webview';
 // @ts-ignore
+import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
 import { ScrollView as NavigationScrollView } from 'react-navigation';
-import WebView from 'react-native-webview';
 
 import { Colors, Layout } from '../../constants';
 import ModalExample from '../ModalExample';
@@ -45,7 +44,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
     isRefreshing: false,
   };
 
-  sections: Array<{ title: string, data: Array<() => JSX.Element> }>;
+  sections: Array<{ title: string; data: Array<() => JSX.Element> }>;
 
   constructor(props: any) {
     super(props);
@@ -74,7 +73,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
       this.setState({ isRefreshing: false });
     }, 3000);
     this.setState({ isRefreshing: true, timeoutId: timeout });
-  }
+  };
 
   componentWillUnmount() {
     clearTimeout(this.state.timeoutId);
@@ -88,8 +87,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
           backgroundColor: '#fff',
           alignItems: 'center',
           justifyContent: 'center',
-        }}
-      >
+        }}>
         <Text>DrawerLayoutAndroid</Text>
       </View>
     );
@@ -99,8 +97,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         drawerWidth={300}
         // @ts-ignore
         drawerPosition="left"
-        renderNavigationView={renderNavigationView}
-      >
+        renderNavigationView={renderNavigationView}>
         <SectionList
           removeClippedSubviews={false}
           stickySectionHeadersEnabled
@@ -122,7 +119,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
 
   _renderItem = ({ item }: any) => {
     return <View>{item()}</View>;
-  }
+  };
 
   _renderSectionHeader = ({ section: { title } }: any) => {
     return (
@@ -130,11 +127,11 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         <Text>{title}</Text>
       </View>
     );
-  }
+  };
 
   _renderModal = () => {
     return <ModalExample />;
-  }
+  };
 
   _renderVerticalScrollView = () => {
     return (
@@ -145,7 +142,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         </Text>
       </View>
     );
-  }
+  };
 
   _renderDrawerLayout = () => {
     return (
@@ -153,7 +150,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         <Text>Swipe from the left of the screen to see the drawer.</Text>
       </View>
     );
-  }
+  };
 
   _renderActivityIndicator = () => {
     const Spacer = () => <View style={{ marginRight: 10 }} />;
@@ -168,7 +165,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         <ActivityIndicator size="large" color="#888" />
       </View>
     );
-  }
+  };
 
   _renderAlert = () => {
     const showAlert = () => {
@@ -191,7 +188,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         <Button onPress={showAlert}>Give me some options</Button>
       </View>
     );
-  }
+  };
 
   _renderHorizontalScrollView = () => {
     const imageStyle = {
@@ -218,11 +215,11 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         />
       </ScrollView>
     );
-  }
+  };
 
   _renderPicker = () => {
     return <PickerExample />;
-  }
+  };
 
   _renderProgressBar = () => {
     return (
@@ -233,11 +230,11 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         <ProgressBarExample progressTintColor="yellow" initialProgress={0.8} />
       </View>
     );
-  }
+  };
 
   _renderSlider = () => {
     return <SliderExample />;
-  }
+  };
 
   _renderStatusBar = () => {
     const randomAnimation = () => {
@@ -259,11 +256,11 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         <Button onPress={show}>Show</Button>
       </View>
     );
-  }
+  };
 
   _renderSwitch = () => {
     return <SwitchExample />;
-  }
+  };
 
   _renderText = () => {
     const linkStyle = { color: Colors.tintColor, marginVertical: 3 };
@@ -282,11 +279,11 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         </Text>
       </View>
     );
-  }
+  };
 
   _renderTextInput = () => {
     return <TextInputExample />;
-  }
+  };
 
   _renderTouchables = () => {
     const buttonStyle = {
@@ -307,8 +304,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
           <TouchableHighlight
             underlayColor="rgba(1, 1, 255, 0.9)"
             style={buttonStyle}
-            onPress={() => {}}
-          >
+            onPress={() => {}}>
             <Text style={buttonText}>Highlight!</Text>
           </TouchableHighlight>
 
@@ -321,8 +317,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
           <TouchableNativeFeedback
             background={TouchableNativeFeedback.Ripple('#fff', false)}
             onPress={() => {}}
-            delayPressIn={0}
-          >
+            delayPressIn={0}>
             <View style={buttonStyle}>
               <Text style={buttonText}>Native feedback!</Text>
             </View>
@@ -334,7 +329,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         </View>
       </View>
     );
-  }
+  };
 
   _renderWebView = () => {
     return (
@@ -359,7 +354,7 @@ export default class ReactNativeCoreScreen extends React.Component<{}, State> {
         />
       </View>
     );
-  }
+  };
 }
 
 class PickerExample extends React.Component {
@@ -371,8 +366,7 @@ class PickerExample extends React.Component {
     return (
       <Picker
         selectedValue={this.state.language}
-        onValueChange={lang => this.setState({ language: lang })}
-      >
+        onValueChange={lang => this.setState({ language: lang })}>
         <Picker.Item label="Java" value="java" />
         <Picker.Item label="JavaScript" value="js" />
         <Picker.Item label="Objective C" value="objc" />
diff --git a/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.ios.tsx b/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.ios.tsx
index 417174094167b..46daac387dbdf 100644
--- a/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.ios.tsx
+++ b/apps/native-component-list/src/screens/ReactNativeCore/ReactNativeCoreScreen.ios.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import { Picker } from '@react-native-community/picker';
+import Slider from '@react-native-community/slider';
+import * as React from 'react';
 import {
   ActionSheetIOS,
   ActivityIndicator,
   Alert,
   Image,
-  Picker,
   ProgressViewIOS,
   RefreshControl,
   SectionList,
   SegmentedControlIOS,
-  Slider,
   Switch,
   StatusBar,
   ScrollView,
@@ -21,11 +21,11 @@ import {
   View,
   TouchableOpacityProps,
 } from 'react-native';
+import WebView from 'react-native-webview';
 // @ts-ignore
 import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
 // @ts-ignore
 import { NavigationScreenProps, ScrollView as NavigationScrollView } from 'react-navigation';
-import WebView from 'react-native-webview';
 
 import Colors from '../../constants/Colors';
 import Layout from '../../constants/Layout';
@@ -40,7 +40,7 @@ export default class ReactNativeCoreScreen extends React.Component<NavigationScr
     isRefreshing: false,
   };
 
-  sections: Array<{ title: string; data: Array<() => JSX.Element> }>;
+  sections: { title: string; data: (() => JSX.Element)[] }[];
 
   _sectionList?: React.Component;
 
diff --git a/yarn.lock b/yarn.lock
index 525477f5bc412..6e2c43d4b2d13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2414,6 +2414,16 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-5.5.0.tgz#7f1d2e301b8a1294da44fb44d7b3fd6ea4d40c8a"
   integrity sha512-9fdOk1dxR3Bt+T4OuQxhf7EjyfbI6qVbPcNfTvVjGgRrx798ixAbBcCC+k5wp3LloVChVicXkyblu+wXEGiCWw==
 
+"@react-native-community/picker@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/picker/-/picker-1.5.1.tgz#41dc805480648271859fd0f03f53980e620973a1"
+  integrity sha512-2rUX0k9dvPLxftN1sujzK0HXhWaPI9gYfeetMcIXWrWgKeitaJ1aHtotTraJmqEZkGoTF2OBPx82RX0j1t2YKw==
+
+"@react-native-community/slider@3.0.0-rc.2":
+  version "3.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-3.0.0-rc.2.tgz#51599c4402ef7b75eba4fdabf49d5f55cb4ffe37"
+  integrity sha512-Tp6LY4AEr4SubT3PmdFwKeKkai/nNyJxeXcvDyuX6OY6O6zxB7Wcf1NF3NNYGNH0zC5YqZCvhIPxo9tSxISffg==
+
 "@react-native-community/viewpager@3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/viewpager/-/viewpager-3.3.0.tgz#e613747a43a31a6f3278f817ba96fdaaa7941f23"