Reactをそこそこ学んだのでReact Nativeに立ち向かう（Expoで）

npm install -g expo-cli

expo init
✔ What would you like to name your app? … lesson-react-native
✔ Choose a template: › blank (TypeScript)  same as blank but with TypeScript configuration
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

yarn add native-base styled-components styled-system

expo install react-native-svg

expo install react-native-safe-area-context

npx typesync

yarn add -D @types/styled-components-react-native

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NativeBaseProvider, Button } from 'native-base';
import styled from 'styled-components/native';

export default function App() {
  return (
    <NativeBaseProvider>
      <StyledView>
        <StatusBar style='auto' />
        <StyledText>Hello world!!</StyledText>
        <Button onPress={() => alert('Are you ready??')}>PUSH</Button>
      </StyledView>
    </NativeBaseProvider>
  );
}

// いつものstyled-componets
const StyledText = styled.Text`
  color: red;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
`;
const StyledView = styled.View`
  background-color: skyblue;
  height: 100%;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
`;

import { Alert } from 'react-native';

export default function App() {
  const showConfirmDialog = () => {
    return Alert.alert(
      'Are your ready??',
      'テキスト テキスト テキスト テキスト テキスト',
      [
        {
          text: 'Yes',
          onPress: () => {},
        },
        {
          text: 'No',
        },
      ]
    );
  };
  return (
    <NativeBaseProvider>
      <StyledView>
        <StatusBar style='auto' />
        <StyledText>Hello world!!</StyledText>
        <Button onPress={showConfirmDialog}>PUSH</Button>
      </StyledView>
    </NativeBaseProvider>
  );
}

yarn add @react-navigation/native     

expo install react-native-screens react-native-safe-area-context

yarn add @react-navigation/native-stack

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NativeBaseProvider, Button, Input } from 'native-base';

/* react-navigation を使用 */
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from './src/screens/Home';
import { LessonScreen } from './src/screens/Lesson';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <Stack.Navigator>
          <Stack.Screen name='Home' component={HomeScreen} />
          <Stack.Screen name='Lesson' component={LessonScreen} />
        </Stack.Navigator>
        <StatusBar style='auto' />
      </NativeBaseProvider>
    </NavigationContainer>
  );
}

import React from 'react';
import { Text, View } from 'react-native';
import { Button } from 'native-base';

export const HomeScreen = ({ navigation }: any) => {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'lime',
      }}
    >
      <Text>Home Screen</Text>
      <Button onPress={() => navigation.navigate('Lesson')}>
        Go Lesson page
      </Button>
    </View>
  );
};

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, Input } from 'native-base';
import styled from 'styled-components/native';

export const LessonScreen = ({ navigation }: any) => {
  const [text, onChangeText] = React.useState('');
  return (
    <StyledView>
      <StyledText>Hello world!!</StyledText>
      <Button onPress={() => alert('Are you ready??')}>PUSH</Button>
      <StyledTextInput
        placeholder='テキストを入力'
        onChangeText={onChangeText}
        value={text}
      />
      <StyledInput
        w='80%' // ここで書かないとFocus時にスタイルが当たらない
        my='20px'
        placeholder='テキストを入力'
        onChangeText={onChangeText}
        value={text}
      />
      <Button onPress={() => navigation.navigate('Home')}>Go Home page</Button>
    </StyledView>
  );
};

const StyledText = styled.Text`
  color: red;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
`;
const StyledView = styled.View`
  background-color: skyblue;
  color: red;

  flex: 1;
  justify-content: center;
  align-items: center;
`;

const StyledTextInput = styled.TextInput`
  border: 2px solid green;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 12px auto;
`;
const StyledInput = styled(Input)`
  background-color: #eee;
`;

import { NavigationStackProp } from 'react-navigation-stack';

export const HomeScreen = ({ navigation }: NavigationStackProp) => {

import { StackNavigationProp } from '@react-navigation/stack';

export const LessonScreen = ({
  navigation,
}: {
  navigation: StackNavigationProp<any>;
}) => {