fix: 🚨 Fixed prop type shadowStyle is invalid warning

Karthik-B-06 · Aug 19, 2020 · 830576b · 830576b
1 parent c94d54c
commit 830576b
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 207 deletions.
diff --git a/examples/RNSegmentedControl/App.js b/examples/RNSegmentedControl/App.js
@@ -6,68 +6,11 @@
  * @flow strict-local
  */
 
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
+import React from "react";
+import AppRoot from "./src/appRoot";
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-import AppRoot from './src/appRoot';
-
-const App: () => React$Node = () => {
-  return (
-    <AppRoot />
-  );
+const App = () => {
+  return <AppRoot />;
 };
 
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
-
 export default App;
diff --git a/examples/RNSegmentedControl/package-lock.json b/examples/RNSegmentedControl/package-lock.json
diff --git a/examples/RNSegmentedControl/package.json b/examples/RNSegmentedControl/package.json
@@ -14,7 +14,7 @@
     "prop-types": "^15.7.2",
     "react": "16.13.1",
     "react-native": "0.63.0",
-    "rn-segmented-control": "^0.2.2-rc.1"
+    "rn-segmented-control": "^0.2.5"
   },
   "devDependencies": {
     "@babel/core": "^7.10.4",

diff --git a/examples/RNSegmentedControl/src/appRoot/index.js b/examples/RNSegmentedControl/src/appRoot/index.js
@@ -1,93 +1,134 @@
-import React from 'react';
-import { Dimensions, StyleSheet, Text, View, Button } from 'react-native';
-import SegmentedControl from 'rn-segmented-control';
+import React from "react";
+import { Dimensions, StyleSheet, Text, View, Button } from "react-native";
+import SegmentedControl from "../components/segmentedControl";
 
 const AppRoot = () => {
   const [tabIndex, setTabIndex] = React.useState(1);
-  const [theme, setTheme] = React.useState('LIGHT');
-  const toggleTheme = () => theme === 'LIGHT' ? setTheme('DARK') : setTheme('LIGHT');
-  const handleTabsChange = index => {
+  const [theme, setTheme] = React.useState("LIGHT");
+  const toggleTheme = () =>
+    theme === "LIGHT" ? setTheme("DARK") : setTheme("LIGHT");
+  const handleTabsChange = (index) => {
     setTabIndex(index);
   };
   return (
-    <View style={[styles.container, { backgroundColor: theme === 'LIGHT' ? 'white' : 'black' }]}>
-      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}>Hello,World !</Text>
-      <Button title='Toggle Theme' onPress={toggleTheme}></Button>
-      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}>Segmented Control with 2 labels</Text>
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme === "LIGHT" ? "white" : "black" },
+      ]}
+    >
+      <Text
+        style={[
+          styles.textStyle,
+          { color: theme === "LIGHT" ? "black" : "white" },
+        ]}
+      >
+        Hello,World !
+      </Text>
+      <Button title="Toggle Theme" onPress={toggleTheme}></Button>
+      <Text
+        style={[
+          styles.textStyle,
+          { color: theme === "LIGHT" ? "black" : "white" },
+        ]}
+      >
+        Segmented Control with 2 labels
+      </Text>
       {/* Default Segmented Control */}
       <SegmentedControl
-        tabs={['Label', 'Label']}
-        onChange={() => { }}
+        tabs={["Label", "Label"]}
+        onChange={() => {}}
         paddingVertical={6}
         containerStyle={{
-          marginVertical: 20
+          marginVertical: 20,
         }}
         currentIndex={tabIndex}
         onChange={handleTabsChange}
         theme={theme}
       />
-      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}> Segmented Control with 3 labels</Text>
+      <Text
+        style={[
+          styles.textStyle,
+          { color: theme === "LIGHT" ? "black" : "white" },
+        ]}
+      >
+        {" "}
+        Segmented Control with 3 labels
+      </Text>
       {/* Segmented Control with a custom width */}
       <SegmentedControl
-        tabs={['Label', 'Label', 'Label']}
-        onChange={() => { }}
+        tabs={["Label", "Label", "Label"]}
+        onChange={() => {}}
         paddingVertical={10}
         containerStyle={{
-          marginVertical: 20
+          marginVertical: 20,
         }}
-        width={Dimensions.get('screen').width - 200}
+        width={Dimensions.get("screen").width - 200}
         theme={theme}
       />
-      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}> Segmented Control with 4 labels</Text>
+      <Text
+        style={[
+          styles.textStyle,
+          { color: theme === "LIGHT" ? "black" : "white" },
+        ]}
+      >
+        {" "}
+        Segmented Control with 4 labels
+      </Text>
       <SegmentedControl
-        tabs={['Label', 'Label', 'Label', 'Label']}
-        onChange={() => { }}
+        tabs={["Label", "Label", "Label", "Label"]}
+        onChange={() => {}}
         paddingVertical={14}
-        width={Dimensions.get('screen').width - 90}
+        width={Dimensions.get("screen").width - 90}
         containerStyle={{
-          marginVertical: 20
+          marginVertical: 20,
         }}
         textStyle={{
-          fontWeight: '300',
-          fontSize: 24
+          fontWeight: "300",
+          fontSize: 24,
         }}
         theme={theme}
       />
-      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}>Customised Segmented Control</Text>
+      <Text
+        style={[
+          styles.textStyle,
+          { color: theme === "LIGHT" ? "black" : "white" },
+        ]}
+      >
+        Customised Segmented Control
+      </Text>
       {/* Segmented Control with a custom width, container style and font weight */}
       <SegmentedControl
-        tabs={['Shop', 'Explore', 'Search']}
-        segmentedControlBackgroundColor='#86c4fD'
-        activeSegmentBackgroundColor='#0482f7'
-        activeTextColor='white'
-        textColor='black'
+        tabs={["Shop", "Explore", "Search"]}
+        segmentedControlBackgroundColor="#86c4fD"
+        activeSegmentBackgroundColor="#0482f7"
+        activeTextColor="white"
+        textColor="black"
         paddingVertical={10}
-        width={Dimensions.get('screen').width - 100}
+        width={Dimensions.get("screen").width - 100}
         containerStyle={{
-          marginVertical: 20
+          marginVertical: 20,
         }}
         textStyle={{
-          fontWeight: '300'
+          fontWeight: "300",
         }}
       />
-    </View >
-  )
-}
-
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     paddingHorizontal: 16,
   },
   textStyle: {
     fontSize: 24,
-    textAlign: 'center',
-    paddingVertical: 10
-  }
-})
-
+    textAlign: "center",
+    paddingVertical: 10,
+  },
+});
 
-export default AppRoot;
+export default AppRoot;