react-native-gesture-handler#TextInput JavaScript Examples

export default function searchNavigator() {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Search"
        component={searchScreen}
        options={{
          title: '',
          headerStyle: {
            backgroundColor: colors.bottomBackGround,
            shadowColor: 'transparent',
          },
          headerTitle: () => <View></View>,
          headerLeft: () => (
            <View style={{marginHorizontal: 5, marginVertical: 10}}>
              <TextInput
                style={{
                  backgroundColor: colors.textInputBackground,
                  height: 35,
                  width: Dimensions.get('screen').width - 10,
                  fontWeight: 'bold',
                  borderRadius: 10,
                  paddingStart: 20,
                  fontSize: 16,
                  color: 'white',
                }}
                placeholder="Search"
                placeholderTextColor={colors.textFaded2}
              />
            </View>
          ),
        }}
      />
    </Stack.Navigator>
  );
}

function Chat(props) {
    const [chats, setChats] = useState([])
    const [reload, setReload] = useState(false)
    const [input, setInput] = useState("")
    const [caption, setCaption] = useState("")
    const [textInput, setTextInput] = useState(null)

    useEffect(() => {
        for (let i = 0; i < props.chats.length; i++) {
            if (props.chats[i].hasOwnProperty('otherUser')) {
                continue;
            }
            let otherUserId;
            if (props.chats[i].users[0] == firebase.auth().currentUser.uid) {
                otherUserId = props.chats[i].users[1];
            } else {
                otherUserId = props.chats[i].users[0];
            }

            const user = props.users.find(x => x.uid === otherUserId)
            if (user == undefined) {
                props.fetchUsersData(otherUserId, false)
            } else {
                props.chats[i].otherUser = user
            }
        }
        setChats(props.chats)
    }, [props.chats, props.users])



    const sendPost = (item) => {
        if (item.sent != undefined) {
            return;
        }
        const textToSend = input;

        setInput("")

        textInput.clear()

        let post = props.route.params.post
        delete post.doc
        firebase.firestore()
            .collection('chats')
            .doc(item.id)
            .collection('messages')
            .add({
                creator: firebase.auth().currentUser.uid,
                text: textToSend,
                post: post,
                creation: firebase.firestore.FieldValue.serverTimestamp()
            })
        firebase.firestore()
            .collection('chats')
            .doc(item.id)
            .update({
                lastMessage: "post sent",
                lastMessageTimestamp: firebase.firestore.FieldValue.serverTimestamp()
            })


        firebase.firestore()
            .collection('chats')
            .doc(item.id)
            .update({
                lastMessage: textToSend,
                lastMessageTimestamp: firebase.firestore.FieldValue.serverTimestamp(),
                [item.users[0]]: false,
                [item.users[1]]: false
            })

        props.navigation.popToTop()

    }

    let share = false;
    let item = null;

    if (props.route.params !== undefined) {
        share = props.route.params.share
        item = props.route.params.post
    }


    if (chats.length === 0) {
        return (
            <View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
                <FontAwesome5 style={{ alignSelf: 'center', marginBottom: 20 }} name="comments" size={40} color="black" />
                <Text style={[text.notAvailable]}>No chats notAvailable</Text>
            </View>
        )
    }
    return (
        <View style={[container.container, container.alignItemsCenter, utils.backgroundWhite]}>
            {item != null ?
                <View style={{ flexDirection: 'row', padding: 20 }}>
                    <TextInput
                        style={[container.fillHorizontal, container.input, container.container]}
                        multiline={true}
                        ref={setTextInput}
                        placeholder="Write a message . . ."
                        onChangeText={(caption) => setInput(caption)}
                    />
                    {item.type == 1 ?
                        <Image
                            style={utils.profileImageSmall}
                            source={{ uri: props.route.params.post.downloadURL }}
                            style={{ aspectRatio: 1 / 1, backgroundColor: 'black', height: 80 }}
                        />
                        :

                        <CachedImage
                            cacheKey={item.id}
                            style={{ aspectRatio: 1 / 1, height: 80 }}
                            source={{ uri: props.route.params.post.downloadURLStill }}
                        />

                    }
                </View>
                : null}

            <Divider />
            {chats.length !== 0 ?
                <FlatList
                    numColumns={1}
                    horizontal={false}
                    data={chats}
                    keyExtractor={(item, index) => item.id}
                    renderItem={({ item }) => (

                        <View style={!item[firebase.auth().currentUser.uid] ? { backgroundColor: '#d2eeff' } : null}>
                            {item.otherUser == null ? (
                                <FontAwesome5
                                    style={[utils.profileImageSmall]}
                                    name="user-circle" size={35} color="black" />
                            )
                                :
                                (
                                    <TouchableOpacity style={[utils.padding15, container.horizontal]}
                                        activeOpacity={share ? 1 : 0}
                                        onPress={() => {
                                            if (!share) {
                                                props.navigation.navigate("Chat", { user: item.otherUser })

                                            }
                                        }}>

                                        <View style={container.horizontal}>

                                            {item.otherUser.image == 'default' ? (
                                                <FontAwesome5
                                                    style={[utils.profileImageSmall]}
                                                    name="user-circle" size={35} color="black" />
                                            )
                                                :
                                                (
                                                    <Image
                                                        style={[utils.profileImageSmall]}
                                                        source={{
                                                            uri: item.otherUser.image
                                                        }} />
                                                )}


                                        </View>

                                        <View>
                                            <Text style={[text.bold]}>{item.otherUser.name}</Text>

                                            <Text numberOfLines={1} ellipsizeMode='tail' style={[utils.margin15Right, utils.margin5Bottom, { paddingBottom: 10 }]}>
                                                {item.lastMessage} {" "}
                                                {item.lastMessageTimestamp == null ? (

                                                    <Text style={[text.grey, text.small, utils.margin5Bottom]}>Now</Text>
                                                ) : (
                                                    <Text
                                                        style={[text.grey, text.small, utils.margin5Bottom]}>
                                                        {timeDifference(new Date(), item.lastMessageTimestamp.toDate())}
                                                    </Text>
                                                )}
                                            </Text>
                                        </View>

                                        {share ? <TouchableOpacity
                                            style={[utils.buttonOutlined, utils.margin15Right, { backgroundColor: '#0095ff', marginLeft: 'auto', justifyContent: 'center' }]}
                                            onPress={() => sendPost(item)}>
                                            <Text style={[text.bold, { color: 'white', textAlign: 'center', textAlignVertical: 'center' }]}>Send</Text>
                                        </TouchableOpacity> :
                                            null}



                                    </TouchableOpacity>
                                )}

                        </View>

                    )
                    }
                />

                :

                <View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
                    <FontAwesome5 style={{ alignSelf: 'center', marginBottom: 20 }} name="comments" size={40} color="black" />
                    <Text style={[text.notAvailable]}>No chats available</Text>
                </View>
            }
        </View >
    )
}

function Search({navigation}) {
  const [searchResult, setResult] = useState([]);
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchData();
  }, []);

  fetchData = () => {
    setLoading(true);
    return Axios.get(
      'https://api.orhanaydogdu.com.tr/deprem/live.php?limit=100',
    )
      .then((res) => {
        setResult(res.data.result);
        return res.data.result;
      })
      .catch((err) => {
        alert(err);
        return err;
      })
      .finally(() => setLoading(false));
  };

  searchData = () => {
    fetchData().then((response) => {
      let result = [];
      const text = keyword.toUpperCase();
      if (text != '') {
        response.map((element) => {
          if (element.title.includes(text)) {
            result.push(element);
          }
        });
      } else {
        result = response;
      }
      setResult(result);
    });
  };

  const renderItem = useCallback(
    ({item}) => (
      <ListItem
        onPress={() => navigation.navigate('QuakeDetail', {item: item})}
        title={item.title}
        mag={item.mag}
        date={item.date}
      />
    ),
    [],
  );

  const getItemLayout = useCallback(
    (_, index) => ({
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index,
    }),
    [],
  );

  const keyExtractor = useCallback((_, index) => index.toString(), []);

  return (
    <View style={styles.container}>
      <View style={styles.headerView}>
        <Text style={styles.titleText}>Deprem</Text>
        <Text style={styles.subtitleText}>
          Kandilli Rasathanesi'nden Anlık Veriler
        </Text>
        <View style={styles.inputView}>
          <TextInput
            style={styles.textInput}
            value={keyword}
            onChangeText={(value) => setKeyword(value)}
            placeholder="Bölge Giriniz"
          />
          <IconButton
            onPress={searchData}
            name="magnify"
            color={Colors.primary}
          />
        </View>
      </View>
      <View style={styles.contentView}>
        {loading ? (
          <Loading
            title="Depremler Yükleniyor"
            subtitle="Deprem verileri yükleniyor. Lütfen bekleyiniz."
          />
        ) : (
          <FlatList
            data={searchResult}
            keyExtractor={keyExtractor}
            renderItem={renderItem}
            getItemLayout={getItemLayout}
            maxToRenderPerBatch={5}
          />
        )}
      </View>
    </View>
  );
}