Adding a form tab WIP

src/app-navigation.js

@@ -5,6 +5,8 @@ import { Icon } from 'react-native-elements';
 import ScreenOne from './screens/screen-one';
 import ScreenTwo from './screens/screen-two';
 import ScreenThree from './screens/screen-three';
+import ScreenFour from './screens/screen-four';
+
 
 const TabNavigator = createBottomTabNavigator({
   'Simple Animation': {
@@ -31,6 +33,14 @@ const TabNavigator = createBottomTabNavigator({
       )
     }
   },
+  'Form': {
+    screen: ScreenFour,
+    navigationOptions: {
+      tabBarIcon: ({ tintColor }) => (
+        <Icon name="form" color={tintColor} type="ant-design"/>
+      )
+    }
+  },
 });
 
 export default createAppContainer(TabNavigator);

src/components/focus-aware-status-bar.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { StatusBar } from 'react-native';
+import { withNavigationFocus } from 'react-navigation';
+
+const FocusAwareStatusBar = withNavigationFocus(({ isFocused, ...rest }) =>
+  isFocused ? <StatusBar {...rest} /> : null
+);
+
+export default FocusAwareStatusBar;

src/screens/screen-four.js

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { View, Text, Image } from 'react-native';
+import { ListItem, Input } from 'react-native-elements';
+import Animated from 'react-native-reanimated';
+import FocusAwareStatusBar from '../components/focus-aware-status-bar';
+
+const HEADER_MAX_HEIGHT = 200;
+const HEADER_MIN_HEIGHT = 60;
+const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
+
+const ScreenFour = ({ navigation }) => {
+  const [scrollY] = useState(new Animated.Value(0));
+  const headerHeight = scrollY.interpolate({
+    inputRange: [0, HEADER_SCROLL_DISTANCE],
+    outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
+    extrapolateRight: 'clamp'
+  });
+  return (
+    <>
+      <FocusAwareStatusBar barStyle="light-content" />
+      <Animated.ScrollView
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: true },
+        )}
+        style={{
+          ...styles.overlay,
+        }}
+        contentContainerStyle={{
+          marginTop: HEADER_MAX_HEIGHT
+        }}
+      >
+        <ListItem bottomDivider>
+          <ListItem.Input
+            style={{ textAlign:'left' }}
+            label="Name"
+            placeholder="Your full name"
+            leftIcon={{ name: 'person' }}
+          />
+        </ListItem>
+
+        <ListItem bottomDivider>
+          <ListItem.Input
+            style={{ textAlign:'left' }}
+            label="Email"
+            placeholder="Email address"
+            leftIcon={{ name: 'email', type: 'material-community' }}
+          />
+        </ListItem>
+
+      </Animated.ScrollView>
+      <View
+        style={styles.overlay}
+        pointerEvents="box-none"
+      >
+        <Animated.View
+          style={{
+            width:'100%',
+            height:headerHeight,
+            alignItems:'center',
+            justifyContent:'center'
+          }}
+        >
+          <Image
+            source={require('../../assets/new-zealand-landscape-auckland-cityscape-sunset-night-reflections.jpg')}
+            style={{
+              flex: 1,
+              width: '100%',
+              height: 100
+            }}
+          />
+        </Animated.View>
+      </View>
+      <View
+        style={styles.overlay}
+        pointerEvents="box-none"
+      >
+        <Animated.View
+          style={{
+            width:'100%',
+            height:headerHeight,
+            backgroundColor:'transparent',
+            paddingTop:30,
+            alignItems:'center',
+            justifyContent:'center'
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+              color: 'white'
+            }}
+          >
+            Nice Form
+          </Text>
+        </Animated.View>
+      </View>
+
+    </>
+  );
+};
+
+const styles = {
+  container: {
+    flex: 1
+  },
+  overlay: {
+    left:0, right: 0,
+    top: 0, bottom: 0,
+    position: 'absolute'
+  },
+  button: {
+    marginHorizontal: 40
+  }
+};
+
+export default ScreenFour;

src/screens/screen-one.js

@@ -1,29 +1,33 @@
 import React, { useState } from 'react';
 import { Text, View, LayoutAnimation } from 'react-native';
 import { Button } from 'react-native-elements';
+import FocusAwareStatusBar from '../components/focus-aware-status-bar';
 
 const ScreenOne = () => {
   const [buttonPressed, setButtonPress] = useState(false);
   return (
-    <View
-      style={{
-        ...styles.container,
-        flexDirection: buttonPressed ? 'column' : 'column-reverse'
-      }}
-    >
+    <>
+      <FocusAwareStatusBar barStyle="dark-content" />
       <View
-        style={styles.content}
+        style={{
+          ...styles.container,
+          flexDirection: buttonPressed ? 'column' : 'column-reverse'
+        }}
       >
-        <Text>Hello this is the first screen</Text>
+        <View
+          style={styles.content}
+        >
+          <Text>Hello this is the first screen</Text>
+        </View>
+        <Button
+          title="Press me!"
+          onPress={()=>{
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+            setButtonPress(!buttonPressed);
+          }}
+        />
       </View>
-      <Button
-        title="Press me!"
-        onPress={()=>{
-          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-          setButtonPress(!buttonPressed);
-        }}
-      />
-    </View>
+    </>
   );
 };
 

src/screens/screen-three.js

@@ -5,6 +5,7 @@ import {
 import { Button } from 'react-native-elements';
 // See: https://github.com/SysCoder/tic-tac-toe-ai-engine#readme
 import ticTacToeAiEngine from 'tic-tac-toe-ai-engine';
+import FocusAwareStatusBar from '../components/focus-aware-status-bar';
 
 const { width, height } = Dimensions.get('window');
 const boardSize = Math.min(width, height) - 40;
@@ -16,59 +17,62 @@ const ScreenThree = () => {
   const [depth, setDepth] = useState(0);
   const [humanPlays, setHumanPlays] = useState('X');
   return (
-    <View
-      style={styles.container}
-    >
+    <>
+      <FocusAwareStatusBar barStyle="dark-content" />
       <View
-        style={styles.board}
+        style={styles.container}
       >
-        {board.map((squareValue, i)=>(
-          <TouchableOpacity
-            key={i}
-            style={styles.square}
-            onPress={()=>{
-              if (!squareValue && (!winner || depth !== 1)) {
-                const newBoard = [...board];
-                newBoard[i] = humanPlays;
-                const result = ticTacToeAiEngine.computeMove(newBoard);
-                console.log('result', result);
-                setWinner(result.winner);
-                setDepth(result.depth);
-                setBoard(result.nextBestGameState);
-              }
-            }}
-          >
-            <Text
-              style={styles.squareValueText}
+        <View
+          style={styles.board}
+        >
+          {board.map((squareValue, i)=>(
+            <TouchableOpacity
+              key={i}
+              style={styles.square}
+              onPress={()=>{
+                if (!squareValue && (!winner || depth !== 1)) {
+                  const newBoard = [...board];
+                  newBoard[i] = humanPlays;
+                  const result = ticTacToeAiEngine.computeMove(newBoard);
+                  console.log('result', result);
+                  setWinner(result.winner);
+                  setDepth(result.depth);
+                  setBoard(result.nextBestGameState);
+                }
+              }}
             >
-              {squareValue}
-            </Text>
-          </TouchableOpacity>
-        ))}
+              <Text
+                style={styles.squareValueText}
+              >
+                {squareValue}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+        <Text
+          style={styles.winnerText}
+        >
+          {winner && depth === 1 ? `The winner is ${winner}` : ' '}
+        </Text>
+        <Button
+          title="Let the computer start"
+          onPress={()=>{
+            const result = ticTacToeAiEngine.computeMove(blankBoard);
+            setWinner('');
+            setHumanPlays('O');
+            setBoard(result.nextBestGameState);
+          }}
+        />
+        <Button
+          title="Reset"
+          onPress={()=>{
+            setWinner('');
+            setHumanPlays('X');
+            setBoard(blankBoard);
+          }}
+        />
       </View>
-      <Text
-        style={styles.winnerText}
-      >
-        {winner && depth === 1 ? `The winner is ${winner}` : ' '}
-      </Text>
-      <Button
-        title={<Text>Tap a square or tap here {'\n'}to let the computer start</Text>}
-        onPress={()=>{
-          const result = ticTacToeAiEngine.computeMove(blankBoard);
-          setWinner('');
-          setHumanPlays('O');
-          setBoard(result.nextBestGameState);
-        }}
-      />
-      <Button
-        title="Reset"
-        onPress={()=>{
-          setWinner('');
-          setHumanPlays('X');
-          setBoard(blankBoard);
-        }}
-      />
-    </View>
+    </>
   );
 };
 

src/screens/screen-two.js

@@ -1,31 +1,35 @@
 import React, { useState } from 'react';
 import { Text, View } from 'react-native';
 import { Button } from 'react-native-elements';
+import FocusAwareStatusBar from '../components/focus-aware-status-bar';
 
 const ScreenTwo = () => {
   const [joke, setJoke] = useState('Press the button to get a Chuck Norris joke');
   return (
-    <View style={styles.container}>
-      <View
-        style={styles.content}
-      >
-        <Text
-          style={styles.jokeText}
+    <>
+      <FocusAwareStatusBar barStyle="dark-content" />
+      <View style={styles.container}>
+        <View
+          style={styles.content}
         >
-          {joke}
-        </Text>
+          <Text
+            style={styles.jokeText}
+          >
+            {joke}
+          </Text>
+        </View>
+        <Button
+          title="Get a joke!"
+          onPress={async ()=> {
+            setJoke('Here it comes...');
+            const response = await fetch('https://api.chucknorris.io/jokes/random');
+            const json = await response.json();
+            const newJoke = json.value;
+            setJoke(newJoke);
+          }}
+        />
       </View>
-      <Button
-        title="Get a joke!"
-        onPress={async ()=> {
-          setJoke('Here it comes...');
-          const response = await fetch('https://api.chucknorris.io/jokes/random');
-          const json = await response.json();
-          const newJoke = json.value;
-          setJoke(newJoke);
-        }}
-      />
-    </View>
+    </>
   );
 };