I am using React-native-elements in my React Native project. I need to add a "+" sign to the right of the card title as shown below, using react-native-vector-icons. I went through the docs, but couldn't find anything relevant.
<Card
title="Resources"
titleStyle={{
textAlign: 'left',
}}
>
<Text style={{textAlign: "center"}}>No resources</Text>
</Card>
As described in this issue, it is possible to provide title with a react component. Therefore, the following works properly.
<Card titleStyle={{textAlign: 'left'}} title={
<View style={{display: "flex",flexDirection: "row"}}>
<Text>About me</Text>
<View style={{flexGrow: 1}} />
<FIcon name="edit"/>
</View>
}>
<Text style={{marginBottom: 10}}>{userData.bio}</Text>
</Card>
Related
I want to move text and images around in react native to custom positions on the webpage. I don't want to use bottom, left, and top etc. because it doesn't land in the same place for different devices.
My code is:
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<ImageBackground
style={{width: '100%', height: '100%',}}
source={require('./assets/pexels.jpg')}
>
</ImageBackground>
<Text style={{fontWeight:'600', fontSize: 30}}>
Connect With All Websites On The Internet
</Text>
<Text style={{fontSize: 18}}>Reach 800M Daily Active Users To Whatever Business You Own!</Text>
<TouchableOpacity>
<Text>Log In</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text>Create An Ad</Text>
</TouchableOpacity>
<Button
onPress={() => navigation.navigate('login')}
title="Next Screen"
/>
<StatusBar style="auto" />
</View>
);
};
I haven't moved any of these components around yet they are just sitting in the automatic positions on the webpage. I want to add other images and move it under the image background I already set.
If I have another text input on the same screen with react-native-gifted-chat component, the keyboard won't work correctly. It will appear in a sec then be dismissed immediately. Happens on both Android and IOS, physical devices and emulator.
I handled keyboard by myself, inside a KeyboardAvoidingView
Demo:
Here my code
<View style={styles.container}>
<View style={styles.container}>
{renderVideo()}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : undefined}
style={{ flex: 1, justifyContent: "flex-end" }}
>
<View style={{ height: 350 }}>
<GiftedChat
textInputProps={{ onFocus: onFocusHandler, onBlur: onBlurHandler }} //
isKeyboardInternallyHandled={false}
wrapInSafeArea={false}
keyboardShouldPersistTaps="handled"
onSend={onSendMessage}
alwaysShowSend
messages={messages}
infiniteScroll
scrollToBottom={false}
inverted
/>
</View>
</KeyboardAvoidingView>
</View>
<AlertModal ref={alertRef} /> // This modal contain another input
</View>
Need some help making Keyboard for second text input works fine
return(
<View style={styles.container}>
<View style={styles.searchbarContainer}>
<TouchableOpacity style={styles.ThreeLineButton} onPress={returnHome}>
<Text style={{color: 'white', fontSize: 20,}}>Done</Text>
</TouchableOpacity>
{/* <Text style={{color: 'white', fontSize: 50, marginLeft: 50}}>UStudy</Text> */}
{/* <TextInput style={styles.searchbarStyle} placeholder="Search Ustudy" placeholderTextColor='#FFF' onChangeText={setSearchText} value={searchText} onChange={refreshSearch} /> */}
</View>
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
>
<FlatList
ref={(ref) => { this.commentListRef = ref; }}
data={allComments}
renderItem={({item}) => <CommentCard item={item} />}
keyExtractor={item=>item.docID}
showsVerticalScrollIndicator={false}
style={{
width: '110%',
}}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
/>
</ScrollView>
</View>
);
};
export default DynamicPostScreen
here is the code of my UI and how the TextInput is embeded. Whenever I type a character in my TextInput it refreshes the whole page and unfocuses from the TextInput. How do I stop this from happening?
Unfortunately, you didn't provide the full code of the component. I recommend you refactor the component and give it proper formatting, especially the indentation.
Also, you usually don't want a FlatList inside a ScrollView, there is probably an issue there.
About the question itself, I can't be 100% sure without the full code.
But it's possible that your setSearchText is triggering a useState change and therefore rerendering the component (that's what a state does).
This is a state management problem and you could move the TextInput to a separate component and manage the state from there so the parent component won't rerender.
Another possibility is that by using onChangeText and onChange you are triggering the render, probably with the refreshSearch function.
If this didn't help, please follow my instructions at the beginning and I'm happy to look at it again.
I am currently developing an application that enables the user to view sports videos and I would like to implement the following feature :
The user is presented with a list of videos but can only see the next ones if he first views the first ones. At the moment I have simply added a lock on the thumbnail of the videos that should be blocked but the user can still click a bit aside and play the video. I have look through all the props of the package react-native-video but didn't see any that would fit my need. At
Would you have ideas ?
Here is also a sample of the code :
<View style={styles.videoRow}>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2013.mp4?alt=media&token=da011245-fce2-4796-a78b-3abc518c73ef'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate3(playbackStatus)}
/>
{!debloque3 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2014.mp4?alt=media&token=cd3d12be-05fd-4fc4-91d9-cd518faf14ce'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate4(playbackStatus)}
/>
{!debloque4 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
</View>
Yeah, a really easy way you can do this is just prevent the thing you don't want to the user to tap on from receiving any pointerEvents (i.e. touch events).
A really simple quick-and-dirty way of doing this like so:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
{/* Obscure the TouchableOpacity with a View which completely covers it */}
{shouldPreventTouches && <View style={StyleSheet.absoluteFill} />}
</View>
</View>
);
Alternatively, you could also just wrap the <Video /> component within a <View /> and useState to toggle between pointerEvents="none" and pointerEvents="auto". Both have the same effect of preventing touch information from being passed to children:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View
pointerEvents={shouldPreventTouches ? 'none' : 'auto'}
style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
</View>
</View>
);
Depends what you prefer.
You could reuse the logic you have for showing the lock or not on the video element, and render the video only if it is unlocked.
<View>
{
debloque ? <Video/> : <FontAwesome5 name="lock" size={40} color="white" style={styles.icon} />
}
</View>
Alternatively you could set the source of the video to null until it is unlocked, to initialize the player but prevent anything to be played, according to the docs.
I put TouchableOpacity for onPress because View can not make it. When i gave TouchableOpacity onPress with navigation it stopped working. Why is not working? Help me please.
Code:
<TouchableOpacity style={{flex:2}}
activeOpacity={.7}
onPress={() => navigate('Articles', {
otherParam: rowData.article_title
})}>
<Image
source = {{ uri: rowData.mobile_image }}
style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4,
borderWidth:1,
borderColor:'#dddddd'}}
/>
<Text
style={styles.textOfArticle}
>
{rowData.article_title}
</Text>
</TouchableOpacity>
Firstly, TouchableOpacity must have only one child component. You are adding Image and Text components separately. They must be wrapped in a View.
Change it like this,
<TouchableOpacity style={{flex:2}}
activeOpacity={.7}
onPress={() => navigate('Articles', {
otherParam: rowData.article_title
})}>
<View>
<Image
source = {{ uri: rowData.mobile_image }}
style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4,
borderWidth:1,
borderColor:'#dddddd'}}
/>
<Text
style={styles.textOfArticle}
>
{rowData.article_title}
</Text>
</View>
</TouchableOpacity>