Migrate examples to TS

examples/.eslintrc.js

@@ -1,4 +1,6 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
 };

examples/.gitignore

@@ -29,6 +29,10 @@ build/
 local.properties
 *.iml
 
+# Visual Studio Code
+#
+.vscode/
+
 # node.js
 #
 node_modules/

examples/examples/Basic/index.js → examples/examples/Basic/index.tsx

@@ -23,6 +23,8 @@ const data = [
   },
 ];
 
+type Item = typeof data[0];
+
 const styles = StyleSheet.create({
   slide: {
     flex: 1,
@@ -47,7 +49,7 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends React.Component {
-  _renderItem = ({item}) => {
+  _renderItem = ({item}: {item: Item}) => {
     return (
       <View
         style={[
@@ -63,7 +65,7 @@ export default class App extends React.Component {
     );
   };
 
-  _keyExtractor = (item) => item.title;
+  _keyExtractor = (item: Item) => item.title;
 
   render() {
     return (

examples/examples/BottomButton/index.js → examples/examples/BottomButton/index.tsx

@@ -27,6 +27,8 @@ const data = [
   },
 ];
 
+type Item = typeof data[0];
+
 const styles = StyleSheet.create({
   slide: {
     flex: 1,
@@ -47,7 +49,7 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends React.Component {
-  _renderItem = ({item}) => {
+  _renderItem = ({item}: {item: Item}) => {
     return (
       <View
         style={{
@@ -62,7 +64,7 @@ export default class App extends React.Component {
     );
   };
 
-  _keyExtractor = (item) => item.title;
+  _keyExtractor = (item: Item) => item.title;
 
   render() {
     return (

examples/examples/CustomButtons/index.js → examples/examples/CustomButtons/index.tsx

@@ -24,6 +24,8 @@ const data = [
   },
 ];
 
+type Item = typeof data[0];
+
 const styles = StyleSheet.create({
   slide: {
     flex: 1,
@@ -55,7 +57,7 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends React.Component {
-  _renderItem = ({item}) => {
+  _renderItem = ({item}: {item: Item}) => {
     return (
       <View
         style={[
@@ -71,7 +73,7 @@ export default class App extends React.Component {
     );
   };
 
-  _keyExtractor = (item) => item.title;
+  _keyExtractor = (item: Item) => item.title;
 
   _renderNextButton = () => {
     return (

examples/examples/CustomPagination/index.js → examples/examples/CustomPagination/index.tsx

@@ -31,6 +31,8 @@ const data = [
   },
 ];
 
+type Item = typeof data[0];
+
 const styles = StyleSheet.create({
   slide: {
     flex: 1,
@@ -90,7 +92,8 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends React.Component {
-  _renderItem = ({item}) => {
+  slider: AppIntroSlider | undefined;
+  _renderItem = ({item}: {item: Item}) => {
     return (
       <View
         style={[
@@ -106,9 +109,9 @@ export default class App extends React.Component {
     );
   };
 
-  _keyExtractor = (item) => item.title;
+  _keyExtractor = (item: Item) => item.title;
 
-  _renderPagination = (activeIndex) => {
+  _renderPagination = (activeIndex: number) => {
     return (
       <View style={styles.paginationContainer}>
         <SafeAreaView>
@@ -123,7 +126,7 @@ export default class App extends React.Component {
                       ? {backgroundColor: 'white'}
                       : {backgroundColor: 'rgba(0, 0, 0, .2)'},
                   ]}
-                  onPress={() => this.goToSlide(i, true)}
+                  onPress={() => this.slider?.goToSlide(i, true)}
                 />
               ))}
           </View>
@@ -150,6 +153,7 @@ export default class App extends React.Component {
           renderItem={this._renderItem}
           renderPagination={this._renderPagination}
           data={data}
+          ref={(ref) => (this.slider = ref!)}
         />
       </View>
     );

examples/examples/FullBackgroundImage/index.js → examples/examples/FullBackgroundImage/index.tsx

@@ -17,6 +17,8 @@ const data = [
   },
 ];
 
+type Item = typeof data[0];
+
 const styles = StyleSheet.create({
   slide: {
     flex: 1,
@@ -30,15 +32,15 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends React.Component {
-  _renderItem = ({item}) => {
+  _renderItem = ({item}: {item: Item}) => {
     return (
       <ImageBackground style={styles.slide} source={item.image}>
         <Text style={styles.text}>{item.text}</Text>
       </ImageBackground>
     );
   };
 
-  _keyExtractor = (item) => item.text;
+  _keyExtractor = (item: Item) => item.text;
 
   render() {
     return (

examples/examples/PartialSize/index.js → examples/examples/PartialSize/index.tsx

@@ -17,6 +17,8 @@ const data = [
   },
 ];
 
+type Item = typeof data[0];
+
 const styles = StyleSheet.create({
   slide: {
     flex: 1,
@@ -32,7 +34,7 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends React.Component {
-  _renderItem = ({item}) => {
+  _renderItem = ({item}: {item: Item}) => {
     return (
       <View
         style={[
@@ -48,7 +50,7 @@ export default class App extends React.Component {
     );
   };
 
-  _keyExtractor = (item) => item.text;
+  _keyExtractor = (item: Item) => item.text;
 
   render() {
     return (

examples/examples/RTL/index.js → examples/examples/RTL/index.tsx

@@ -34,6 +34,8 @@ const data = [
   },
 ];
 
+type Item = typeof data[0];
+
 const styles = StyleSheet.create({
   slide: {
     flex: 1,
@@ -58,7 +60,7 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends React.Component {
-  _renderItem = ({item}) => {
+  _renderItem = ({item}: {item: Item}) => {
     return (
       <View
         style={[
@@ -74,7 +76,7 @@ export default class App extends React.Component {
     );
   };
 
-  _keyExtractor = (item) => item.title;
+  _keyExtractor = (item: Item) => item.title;
 
   render() {
     return (

examples/index.js

@@ -1,7 +1,7 @@
 import {AppRegistry} from 'react-native';
 import {name as appName} from './app.json';
 
-import Example from './examples/Basic/';
+import Example from './examples/Basic';
 // import Example from './examples/PartialSize/';
 // import Example from './examples/BottomButton/';
 // import Example from './examples/CustomButtons/';

examples/ios/Podfile

@@ -1,13 +1,36 @@
 platform :ios, '9.0'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-def add_flipper_pods!
-  version = '~> 0.33.1'
-  pod 'FlipperKit', version, :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitLayoutPlugin', version, :configuration => 'Debug'
-  pod 'FlipperKit/SKIOSNetworkPlugin', version, :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', version, :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitReactPlugin', version, :configuration => 'Debug'
+def add_flipper_pods!(versions = {})
+  versions['Flipper'] ||= '~> 0.33.1'
+  versions['DoubleConversion'] ||= '1.1.7'
+  versions['Flipper-Folly'] ||= '~> 2.1'
+  versions['Flipper-Glog'] ||= '0.3.6'
+  versions['Flipper-PeerTalk'] ||= '~> 0.0.4'
+  versions['Flipper-RSocket'] ||= '~> 1.0'
+
+  pod 'FlipperKit', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FlipperKitLayoutPlugin', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/SKIOSNetworkPlugin', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FlipperKitReactPlugin', versions['Flipper'], :configuration => 'Debug'
+
+  # List all transitive dependencies for FlipperKit pods
+  # to avoid them being linked in Release builds
+  pod 'Flipper', versions['Flipper'], :configuration => 'Debug'
+  pod 'Flipper-DoubleConversion', versions['DoubleConversion'], :configuration => 'Debug'
+  pod 'Flipper-Folly', versions['Flipper-Folly'], :configuration => 'Debug'
+  pod 'Flipper-Glog', versions['Flipper-Glog'], :configuration => 'Debug'
+  pod 'Flipper-PeerTalk', versions['Flipper-PeerTalk'], :configuration => 'Debug'
+  pod 'Flipper-RSocket', versions['Flipper-RSocket'], :configuration => 'Debug'
+  pod 'FlipperKit/Core', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/CppBridge', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FBCxxFollyDynamicConvert', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FBDefines', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FKPortForwarding', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FlipperKitHighlightOverlay', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FlipperKitLayoutTextSearchable', versions['Flipper'], :configuration => 'Debug'
+  pod 'FlipperKit/FlipperKitNetworkPlugin', versions['Flipper'], :configuration => 'Debug'
 end
 
 # Post Install processing for Flipper
@@ -78,4 +101,4 @@ target 'examples-tvOS' do
     inherit! :search_paths
     # Pods for testing
   end
-end
+end