expo-expo

App.js

import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ActivityIndicator, Dimensions } from 'react-native';
import { Header, Avatar, Badge, Button, ButtonGroup, Card, CheckBox, Divider, Image, Input} from 'react-native-elements';

const App: React.FC = () => {
  const [text1, setText1] = useState<string>('');
  const [selectedIdx, setSelectedIdx] = useState<number>(0);
  const buttons = ['What', 'the', 'Fuck'];

  const [imageNumIdx, setImageNumIdx] = useState<number>(3);
  const [imageSize, setImageSize] = useState<number>(Dimensions.get('window').width/4);
  const [checked, setChecked] = useState<boolean>(false);
  const icon = "https://pbs.twimg.com/profile_images/1262258309479858176/XDn-m3DI_400x400.jpg";

  const imageNums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
  useEffect(()=>{
    const imageNum = parseInt(imageNums[imageNumIdx]);
    setImageSize(Dimensions.get('window').width/imageNum);
  }, [imageNumIdx]);

  return (
      <View style={{flex:1, paddingVertical:80}}>
        <Card>
          <Card.Title>expo-expo</Card.Title>
          <View style={{width:80, marginLeft:10}}>
            <Avatar
              rounded
              size="large"
              source={{uri:icon}}
            />
            <Badge
              status="success"
              value={buttons[selectedIdx]}
              containerStyle={{ position: 'absolute', top: -5, right: -5 }}
            />
          </View>

          <View style={{width:80, marginLeft:10}}>
            <Avatar
              containerStyle={{backgroundColor:'gray'}}
              rounded
              size="large"
              icon={{ name: 'home' }}
            />
            <Badge
              status="success"
              value={buttons[selectedIdx]}
              containerStyle={{ position: 'absolute', top: -5, right: -5 }}
            />
          </View>


          <Divider style={{
            backgroundColor: 'gray',
            margin:10,
            height:1,
            }}
          />

          <ButtonGroup
            onPress={(i)=>{
              setSelectedIdx(i)
            }}
            selectedIndex={selectedIdx}
            buttons={buttons}
            containerStyle={{height: 40}}
          />

          <ButtonGroup
            onPress={(i)=>{
              setImageNumIdx(i)
            }}
            selectedIndex={imageNumIdx}
            buttons={imageNums}
            containerStyle={{height: 40}}
          />

          <CheckBox
            title='Click Me'
            checked={checked}
            onPress={()=>{
              setChecked(!checked)
            }}
          />


          <Input
            value={text1}
            label="text1 input area"
            errorMessage="required"
            onChangeText={
              (t)=>{
                setText1(t)
              }
            }
          />
          <Button
            title="Alert"
            raised
            onPress={
              (e)=>{
                alert(text1)
              }
            }
          />
        </Card>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap', }}>
          {
            imageNums.map((i) => {
              return (
                <View style={{ width: imageSize, height: imageSize }} key={i}>
                <Image
                  source={{ uri: icon }}
                  style={{ width: imageSize, height: imageSize }}
                  PlaceholderContent={<ActivityIndicator />}
                />
                <Badge
                  status="success"
                  value={i}
                  containerStyle={{ position: 'absolute', top: 10, right: 10 }}
                />
                </View>
              )
            })
          }
        </View>
      </View>
  );
}
export default App;