react-native-owl/example/src/PressMe.tsx at 1501410aae720720ced3ef994b382b66efff1dbd · FormidableLabs/react-native-owl · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import {
  ActivityIndicator,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import React from 'react';
import { PressMeButton } from './PressMe.button';

export const PressMe = () => {
  const [text, setText] = React.useState('');
  const [isLongPressed, setIsLongPressed] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const [isLoaded, setIsLoaded] = React.useState(false);

  React.useEffect(() => {
    if (isLoading) {
      setTimeout(() => {
        setIsLoading(false);
        setIsLoaded(true);
      }, 1500);
    }
  }, [isLoading]);

  return (
    <View style={styles.header}>
      {!isLoaded && !isLoading && (
        <Pressable
          testID="Pressable"
          onPress={() => setIsLoading(true)}
          onLongPress={() => setIsLongPressed(true)}
          style={styles.button}
        >
          <Text style={styles.buttonText}>Press Me</Text>
          <Text style={styles.buttonArrow}>&#8594;</Text>
        </Pressable>
      )}

      {isLoading && <ActivityIndicator />}

      {isLongPressed && !isLoading && !isLoaded && (
        <Text style={styles.textLongPressed}>Long Pressed!</Text>
      )}

      {!isLoading && isLoaded && (
        <>
          <Text style={styles.textInputLabel}>This is a label *</Text>

          <TextInput
            testID="TextInput"
            placeholder="Type something here"
            onChangeText={setText}
            value={text}
            style={styles.textInput}
          />

          <PressMeButton />
        </>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    marginVertical: 35,
  },
  button: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 2,
    paddingVertical: 7.5,
    paddingHorizontal: 20,
    borderRadius: 20,
  },
  textLongPressed: {
    marginTop: 35,
    fontSize: 20,
    fontStyle: 'italic',
    textAlign: 'center',
  },
  textInputLabel: {
    fontWeight: '600',
    marginBottom: 5,
    paddingHorizontal: 20,
  },
  textInput: {
    borderWidth: 1,
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 20,
  },
  highlight: {
    fontWeight: '700',
  },
  buttonText: {
    fontSize: 16,
    fontWeight: '600',
  },
  buttonArrow: {
    fontSize: 20,
  },
});