chore: tweaking examples

snooperapp · May 20, 2020 · a294fab · a294fab
1 parent e0df970
commit a294fab
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 16 deletions.
diff --git a/example/components/Carousel.tsx b/example/components/Carousel.tsx
@@ -12,9 +12,9 @@ const Carousel: React.FC<{ index: number }> = React.memo(
       <View style={[styles.row, { borderTopWidth: index === 0 ? 0 : 1 }]}>
         <Text style={styles.title}>{`Popular in ${Faker.address.city()}`}</Text>
         <FlatList
+          contentContainerStyle={{ paddingHorizontal: 8 }}
           showsHorizontalScrollIndicator={false}
-          pagingEnabled
-          initialNumToRender={2}
+          initialNumToRender={5}
           data={Array.from({ length: 10 }).map((_, i) => String(i))}
           horizontal
           keyExtractor={j => `row-${index}-item-${j}`}

diff --git a/example/components/CarouselItem.tsx b/example/components/CarouselItem.tsx
@@ -26,10 +26,6 @@ const CarouselItem: React.FC = React.memo(
                   }
             }
           />
-          <Card.Content>
-            <Title style={{ marginTop: 8 }}>{Faker.address.streetName()}</Title>
-            <Paragraph>{Faker.address.streetSuffix()}</Paragraph>
-          </Card.Content>
         </Card>
       </View>
     );
@@ -41,11 +37,12 @@ export default CarouselItem;
 
 const styles = StyleSheet.create({
   item: {
-    paddingHorizontal: 16,
+    paddingHorizontal: 4,
     paddingVertical: 8,
   },
   imageStyle: {
-    width: windowWidth - 32,
+    width: (windowWidth - 32) / 1.5,
+    height: 150,
     resizeMode: 'cover',
   },
 });
diff --git a/example/components/Handle.tsx b/example/components/Handle.tsx
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
   header: {
     alignItems: 'center',
     backgroundColor: 'white',
-    paddingTop: 20,
+    paddingVertical: 20,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     shadowColor: '#000',

diff --git a/example/screens/HorizontalFlatListExample.tsx b/example/screens/HorizontalFlatListExample.tsx
@@ -28,15 +28,15 @@ const initialRegion = {
   longitude: -0.1255756,
 };
 const { height: windowHeight } = Dimensions.get('window');
-const snapPointsFromTop = [128, '50%', windowHeight - 128];
+const snapPointsFromTop = [96, '50%', windowHeight - 128];
 
 const HorizontalFlatListExample: React.FC<Props> = ({ navigation }) => {
   const bottomSheetRef = React.useRef<ScrollBottomSheet<any> | null>(null);
 
   const animatedPosition = React.useRef(new Value(0));
   const opacity = interpolate(animatedPosition.current, {
     inputRange: [0, 1],
-    outputRange: [0, 0.5],
+    outputRange: [0, 0.75],
     extrapolate: Extrapolate.CLAMP,
   });
 
@@ -84,7 +84,7 @@ const HorizontalFlatListExample: React.FC<Props> = ({ navigation }) => {
             <Ionicons
               name="ios-arrow-back"
               size={32}
-              color="#3F51B5"
+              color="white"
               style={styles.icon}
             />
           </TouchableRipple>
@@ -101,7 +101,7 @@ const HorizontalFlatListExample: React.FC<Props> = ({ navigation }) => {
         keyExtractor={i => `row-${i}`}
         initialNumToRender={5}
         contentContainerStyle={styles.contentContainerStyle}
-        data={Array.from({ length: 20 }).map((_, i) => String(i))}
+        data={Array.from({ length: 100 }).map((_, i) => String(i))}
         renderItem={renderRow}
       />
     </View>

diff --git a/example/screens/SectionListExample.tsx b/example/screens/SectionListExample.tsx
@@ -28,7 +28,7 @@ const navBarHeight = 56;
 const sections = createMockData();
 
 const SectionListExample: React.FC<Props> = () => {
-  const snapPointsFromTop = [0, '40%', windowHeight - 264];
+  const snapPointsFromTop = [96, '45%', windowHeight - 264];
   const animatedPosition = React.useRef(new Value(0.5));
   const handleLeftRotate = concat(
     interpolate(animatedPosition.current, {
@@ -48,7 +48,7 @@ const SectionListExample: React.FC<Props> = () => {
   );
   const cardScale = interpolate(animatedPosition.current, {
     inputRange: [0, 0.6, 1],
-    outputRange: [1, 1, 0.8],
+    outputRange: [1, 1, 0.9],
     extrapolate: Extrapolate.CLAMP,
   });
 
@@ -118,7 +118,7 @@ const SectionListExample: React.FC<Props> = () => {
           easing: Easing.inOut(Easing.linear),
         }}
         renderHandle={() => (
-          <Handle style={{ paddingVertical: 20 }}>
+          <Handle style={{ paddingVertical: 20, backgroundColor: '#F3F4F9' }}>
             <Animated.View
               style={[
                 styles.handle,