react-native-gesture-handler#TextInput JavaScript Examples
The following examples show how to use
react-native-gesture-handler#TextInput.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: searchNavigator.js From react-native-instagram-clone with MIT License | 6 votes |
|
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>
);
}
Example #2
| Source File: List.js From InstagramClone with Apache License 2.0 | 4 votes |
|
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 >
)
}
Example #3
| Source File: Home.js From deprem with GNU Lesser General Public License v3.0 | 4 votes |
|
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>
);
}
