【ReactNative】モーダル画面（１）

Overlay

ReactNativeの標準コンポーネントにもModalがありますが、ReactNativeElementsのOverlayを使います。 こちらを使う利点は、標準で背景をグレーにしてくれてPaddingをいい感じに整えてくれます。

react-native-elements.github.io

reactnative.dev

使い方

ボタンか何かでisVisibleプロパティをtrueにすると表示されます。 閉じるボタンまたは背景クリックで閉じるようにしています。

import { Button, Overlay, Input, Icon } from 'react-native-elements';

let [showLogin, setShowLogin]  = React.useState(false);

<Overlay
  isVisible={showLogin}
  onBackdropPress={() => setShowLogin(false)}
>
   <View>
    画面の中身
   </View>
</Overlay>

  let [email, setEmail] = React.useState('');
  let [password, setPassword] = React.useState('');

<Overlay
      isVisible={showLogin}
      onBackdropPress={() => setShowLogin(false)}
    >
      <View>
        <TouchableOpacity
          style={{
            alignSelf: 'flex-end',
            marginTop: -15,
            justifyContent: 'center',
            alignItems: 'center',
          }}
          onPress={() => setShowLogin(false)}
        >
          <Text style={{ fontSize: 32 }}>×</Text>
        </TouchableOpacity>
        <View
          style={{
            height: 100,
            backgroundColor: 'seagreen',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: 'white', fontSize: 32 }}>LOG IN</Text>
        </View>
        <View>
          <Input
            placeholder="Email"
            leftIcon={
              <Icon
                type="simple-line-icon"
                name="envelope"
                size={24}
                color={'rgba(0,0,0,0.38)'}
                style={{ backgroundColor: 'transparent' }}
                containerStyle={{ paddingRight: 10 }}
              />
            }
            containerStyle={{ marginTop: 16 }}
            keyboardType="email-address"
            returnKeyType="next"
            value={email}
            onChangeText={(value) => setEmail(value)}
          />
          <Input
            placeholder="Password"
            leftIcon={
              <Icon
                type="simple-line-icon"
                name="lock"
                size={24}
                color={'rgba(0,0,0,0.38)'}
                style={{ backgroundColor: 'transparent' }}
                containerStyle={{ paddingRight: 10 }}
              />
            }
            containerStyle={{ marginTop: 16 }}
            secureTextEntry
            returnKeyType="done"
            value={password}
            onChangeText={(value) => setPassword(value)}
          />
        </View>
        <Button
          title="LOG IN"
          onPress={login}
          buttonStyle={{
            backgroundColor: '#FF9800',
            borderRadius: 10,
          }}
          containerStyle={{ marginHorizontal: 30, marginTop: 16 }}
        />
      </View>
    </Overlay>
  );