chore: updated examples styling

gorhom · Jan 19, 2021 · 4b744ea · 4b744ea
1 parent 5bfadcd
commit 4b744ea
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 114 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -245,12 +245,12 @@ PODS:
  - ReactCommon/callinvoker (= 0.62.2)
  - RNCMaskedView (0.1.10):
  - React
- - RNGestureHandler (1.6.1):
- - React
- - RNReanimated (1.9.0):
- - React
- - RNScreens (2.8.0):
- - React
+ - RNGestureHandler (1.9.0):
+ - React-Core
+ - RNReanimated (1.13.2):
+ - React-Core
+ - RNScreens (2.15.1):
+ - React-Core
  - RNSVG (12.1.0):
  - React
  - Yoga (1.14.0)
@@ -387,9 +387,9 @@ SPEC CHECKSUMS:
  React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
  ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
- RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
- RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
- RNScreens: 62211832af51e0aebcf6e8c36bcf7dd65592f244
+ RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
+ RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
+ RNScreens: 8aca37f78a2c5d8b50e400612618d00c03695a8c
  RNSVG: ce9d996113475209013317e48b05c21ee988d42e
  Yoga: 3ebccbdd559724312790e7742142d062476b698e
 

diff --git a/example/package.json b/example/package.json
@@ -9,25 +9,25 @@
  "start": "react-native start"
  },
  "dependencies": {
- "@gorhom/showcase-template": "^0.3.1",
+ "@gorhom/showcase-template": "^1.0.2",
  "@react-native-community/masked-view": "^0.1.10",
- "@react-navigation/native": "^5.2.3",
- "@react-navigation/stack": "^5.2.18",
+ "@react-navigation/native": "^5.9.0",
+ "@react-navigation/stack": "^5.13.0",
  "react": "16.11.0",
  "react-native": "0.62.2",
- "react-native-gesture-handler": "^1.6.1",
- "react-native-reanimated": "^1.8.0",
- "react-native-redash": "^13.3.0",
+ "react-native-gesture-handler": "^1.9.0",
+ "react-native-reanimated": "^1.13.2",
+ "react-native-redash": "^14.2.4",
  "react-native-safe-area-context": "^0.7.3",
- "react-native-screens": "^2.7.0",
+ "react-native-screens": "^2.15.1",
  "react-native-svg": "^12.1.0"
  },
  "devDependencies": {
- "@babel/core": "^7.8.4",
- "@babel/runtime": "^7.8.4",
+ "@babel/core": "^7.12.10",
+ "@babel/runtime": "^7.12.5",
  "@types/react": "^16.9.34",
  "@types/react-native": "^0.62.5",
  "metro-react-native-babel-preset": "^0.59.0",
- "typescript": "^3.8.3"
+ "typescript": "^4.1.3"
  }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import { DarkTheme, NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import RootScreen from './screens/Root';
 import BasicScreen from './screens/Basic';
@@ -13,47 +13,51 @@ const Stack = createStackNavigator();
 
 export default function App() {
  return (
- <NavigationContainer>
- <Stack.Navigator initialRouteName="Root" headerMode="none">
- <Stack.Screen name="Root" component={RootScreen} />
+ <NavigationContainer theme={DarkTheme}>
+ <Stack.Navigator initialRouteName="Root">
+ <Stack.Screen
+ name="Root"
+ component={RootScreen}
+ options={{ headerShown: false }}
+ />
  <Stack.Screen
  name="Basic"
- initialParams={{
+ options={{
  title: 'Basic',
  }}
  component={BasicScreen}
  />
  <Stack.Screen
  name="BasicRTL"
- initialParams={{
+ options={{
  title: `בסיסי`,
  }}
  component={BasicRTLScreen}
  />
  <Stack.Screen
  name="BasicCustomSeparator"
- initialParams={{
+ options={{
  title: 'Custom Separator',
  }}
  component={BasicCustomSeparatorScreen}
  />
  <Stack.Screen
  name="FacebookStories"
- initialParams={{
+ options={{
  title: 'Facebook Stories',
  }}
  component={FacebookStoriesScreen}
  />
  <Stack.Screen
  name="FacebookStoriesStyled"
- initialParams={{
+ options={{
  title: 'Facebook Stories Styled',
  }}
  component={FacebookStoriesStyledScreen}
  />
  <Stack.Screen
  name="FacebookStoriesRTL"
- initialParams={{
+ options={{
  title: 'فيس بوك قصص',
  }}
  component={FacebookStoriesRTLScreen}

diff --git a/example/src/screens/Basic.tsx b/example/src/screens/Basic.tsx
@@ -3,15 +3,12 @@ import {
  StyleSheet,
  View,
  SafeAreaView,
- StatusBar,
- Text,
  Alert,
  Platform,
  FlatList,
  ListRenderItemInfo,
 } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useRoute } from '@react-navigation/native';
 import StickyItemFlatList from '@gorhom/sticky-item';
 import Button from '../components/button';
 import DummyItem from '../components/dummy-item';
@@ -30,9 +27,6 @@ const BORDER_RADIUS = 0;
 
 const Basic = () => {
  const flatListRef = useRef<FlatList>(null);
- const { params } = useRoute();
- // @ts-ignore
- const { title } = params;
 
  // styles
  const containerStyle = {
@@ -75,8 +69,6 @@ const Basic = () => {
  );
  return (
  <SafeAreaView style={styles.root}>
- <StatusBar barStyle="dark-content" />
- <Text style={styles.text}>{title}</Text>
  <View style={containerStyle}>
  <StickyItemFlatList
  ref={flatListRef}
@@ -110,8 +102,7 @@ const styles = StyleSheet.create({
  root: {
  flex: 1,
  flexDirection: 'column',
- justifyContent: 'flex-start',
- backgroundColor: '#CACACD',
+ justifyContent: 'center',
  },
  text: {
  marginHorizontal: SEPARATOR_SIZE * 2,

diff --git a/example/src/screens/BasicCustomSeparator.tsx b/example/src/screens/BasicCustomSeparator.tsx
@@ -2,15 +2,11 @@ import React from 'react';
 import {
  StyleSheet,
  View,
- SafeAreaView,
- StatusBar,
- Text,
  Alert,
  Platform,
  ListRenderItemInfo,
 } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useRoute } from '@react-navigation/native';
 import StickyItemFlatList from '@gorhom/sticky-item';
 import DummyItem from '../components/dummy-item';
 import BasicSticky from '../components/basic-sticky';
@@ -27,10 +23,6 @@ const SEPARATOR_SIZE = 40;
 const BORDER_RADIUS = 0;
 
 const BasicCustomSeparator = () => {
- const { params } = useRoute();
- // @ts-ignore
- const { title } = params;
-
  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');
 
@@ -55,9 +47,7 @@ const BasicCustomSeparator = () => {
  );
  };
  return (
- <SafeAreaView style={styles.root}>
- <StatusBar barStyle="dark-content" />
- <Text style={styles.text}>{title}</Text>
+ <View style={styles.root}>
  <View style={styles.container}>
  <StickyItemFlatList
  itemWidth={STORY_WIDTH}
@@ -74,16 +64,15 @@ const BasicCustomSeparator = () => {
  ItemSeparatorComponent={renderSeparator}
  />
  </View>
- </SafeAreaView>
+ </View>
  );
 };
 
 const styles = StyleSheet.create({
  root: {
  flex: 1,
  flexDirection: 'column',
- justifyContent: 'flex-start',
- backgroundColor: '#CACACD',
+ justifyContent: 'center',
  },
  container: {
  paddingVertical: 20,

diff --git a/example/src/screens/BasicRTL.tsx b/example/src/screens/BasicRTL.tsx
@@ -2,15 +2,11 @@ import React from 'react';
 import {
  StyleSheet,
  View,
- SafeAreaView,
- StatusBar,
- Text,
  Alert,
  Platform,
  ListRenderItemInfo,
 } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useRoute } from '@react-navigation/native';
 import StickyItemFlatList from '@gorhom/sticky-item';
 import DummyItem from '../components/dummy-item';
 import BasicSticky from '../components/basic-sticky';
@@ -27,10 +23,6 @@ const SEPARATOR_SIZE = 10;
 const BORDER_RADIUS = 0;
 
 const BasicRTL = () => {
- const { params } = useRoute();
- // @ts-ignore
- const { title } = params;
-
  // styles
  const containerStyle = {
  paddingVertical: SEPARATOR_SIZE * 2,
@@ -53,9 +45,7 @@ const BasicRTL = () => {
  </TouchableOpacity>
  );
  return (
- <SafeAreaView style={styles.root}>
- <StatusBar barStyle="light-content" />
- <Text style={styles.text}>{title}</Text>
+ <View style={styles.root}>
  <View style={containerStyle}>
  <StickyItemFlatList
  itemWidth={STORY_WIDTH}
@@ -72,16 +62,15 @@ const BasicRTL = () => {
  renderItem={renderItem}
  />
  </View>
- </SafeAreaView>
+ </View>
  );
 };
 
 const styles = StyleSheet.create({
  root: {
  flex: 1,
  flexDirection: 'column',
- justifyContent: 'flex-start',
- backgroundColor: '#000',
+ justifyContent: 'center',
  },
  text: {
  textAlign: 'right',

diff --git a/example/src/screens/FacebookStories.tsx b/example/src/screens/FacebookStories.tsx
@@ -2,15 +2,11 @@ import React from 'react';
 import {
  StyleSheet,
  View,
- SafeAreaView,
- StatusBar,
- Text,
  Alert,
  Platform,
  ListRenderItemInfo,
 } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useRoute } from '@react-navigation/native';
 import StickyItemFlatList from '@gorhom/sticky-item';
 import DummyItem from '../components/dummy-item';
 import FacebookStickyStory from '../components/facebook-sticky-story';
@@ -27,10 +23,6 @@ const SEPARATOR_SIZE = 10;
 const BORDER_RADIUS = 15;
 
 const FacebookStories = () => {
- const { params } = useRoute();
- // @ts-ignore
- const { title } = params;
-
  // styles
  const containerStyle = {
  paddingVertical: SEPARATOR_SIZE,
@@ -53,9 +45,7 @@ const FacebookStories = () => {
  </TouchableOpacity>
  );
  return (
- <SafeAreaView style={styles.root}>
- <StatusBar barStyle="dark-content" />
- <Text style={styles.text}>{title}</Text>
+ <View style={styles.root}>
  <View style={containerStyle}>
  <StickyItemFlatList
  itemWidth={STORY_WIDTH}
@@ -71,16 +61,15 @@ const FacebookStories = () => {
  renderItem={renderItem}
  />
  </View>
- </SafeAreaView>
+ </View>
  );
 };
 
 const styles = StyleSheet.create({
  root: {
  flex: 1,
  flexDirection: 'column',
- justifyContent: 'flex-start',
- backgroundColor: '#CACACD',
+ justifyContent: 'center',
  },
  text: {
  marginHorizontal: SEPARATOR_SIZE * 2,