react-native-responsive-ui/App.tsx at main · reactnativespace/react-native-responsive-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { responsive } from './utils/responsive';

export default function App() {
  return (
    <SafeAreaView style={{
      flex:1,
      backgroundColor:'#121212'}}>

      <View style={{
        flex:1,
        padding: responsive.number(16)
      }}>

        <View style={{
          marginVertical: responsive.number(32),
        }}>
          <Text style={{
            fontSize: responsive.fontSize(28),
            color: '#FFF',
          }}>Welcome back!</Text>

          <Text style={{
            fontSize: responsive.fontSize(16),
            color: '#666666',
            marginTop: responsive.number(4),
          }}>Sign in to continue</Text>
        </View>

        <TextInput style={{
          padding: responsive.number(16),
          backgroundColor:'#1E1E1E',
          fontSize: responsive.fontSize(16),
          borderRadius:responsive.number(12),
          color:'#FFF',
          marginBottom: responsive.number(16),
        }} placeholder={'Email address'} placeholderTextColor={'#666666'}/>

        <TextInput style={{
          padding: responsive.number(16),
          backgroundColor:'#1E1E1E',
          fontSize: responsive.fontSize(16),
          borderRadius:responsive.number(12),
          color:'#FFF',
          marginBottom: responsive.number(16),
        }} placeholder={'Password'} placeholderTextColor={'#666666'}/>

        <TouchableOpacity style={{
          padding: responsive.number(16),
          backgroundColor:'#4A4AFF',
          borderRadius:responsive.number(12),
          marginBottom: responsive.number(16)
        }}>
          <Text style={{
            color: '#FFF',
            fontSize: responsive.fontSize(16),
            textAlign:'center'
          }}>Sign In</Text>
        </TouchableOpacity>

        <Text style={{
          color: '#666666',
          fontSize: responsive.fontSize(14),
          textAlign:'center',
          marginBottom:responsive.number(16)}}>Forgot password?</Text>

        <View style={{
          flexDirection:'row',
          alignSelf:'center'
        }}>
          <Text style={{
            color: '#666666',
            fontSize: responsive.fontSize(14)}}>Don't have an account?</Text>

          <Text style={{
            color: '#FFF',
            fontSize: responsive.fontSize(14),
            marginBottom:responsive.number(16)}}>Create Account</Text>
        </View>
      </View>

      <Text style={{
        color: '#FFF',
        fontSize: responsive.fontSize(14),
        textAlign:'center',
        marginBottom:responsive.number(16)}}> {Math.round(responsive.deviceWidth) + ' x ' + Math.round(responsive.deviceHeight)}</Text>
      <StatusBar style='light'/>
    </SafeAreaView>
  );
}