I saw one example few months ago where was added extra style to the same element like this:
<Button style={ styles.button && backgroundColor: '#222222'}>
<Text> Learn more </Text>
</Button>
But can't remember how was the right syntax. It's not working now. How can this code be fixed?
You have couple of options.
Option 1:
You can spread the object and add the desired one after.
<Button style={{ ...styles.button, backgroundColor: '#222222'}}>
<Text> Learn more </Text>
</Button>
Option 2:
You can use Object.assign() to clone and add more properties to your object.
<Button style={Object.assign({}, styles.button, { backgroundColor: '#222222'})}>
<Text> Learn more </Text>
</Button>
Option 3:
style prop can have an array of objects.
<Button style={[styles.button, { backgroundColor: '#222222'}]}>
<Text> Learn more </Text>
</Button>
You can do it by passing an array of styles
<Button style={[styles.button, { backgroundColor: 'white' }]} />
Related
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.
This is what I have done so far:
I want the text input to extent until reaches end of box.
Here's my code:
<View style={{ flexDirection: 'row' }} >
<Switch style={styles.switch}
trackColor={{true: "#36d79a", false: 'grey'}}
thumbColor={{true: "#36d79a", false: 'grey'}}
/>
<Input right placeholder="Type your custom question here." iconContent=
{<Block />}
/>
</View>
To fill space along the main axis of flexboxes, apply the flex property with a number value to flex children. The number specifies the proportions of how the available space is distributed among the flex children. See the docs on flexbox for details.
In your case, you would specify flex: 1 only for the <Input /> meaning that this component alone is allowed to fill the rest of the space. I've created this React Native & MUI Codesandbox to demonstrate it.
<View style={{ flexDirection: 'row' }} >
<Switch style={styles.switch}
trackColor={{true: "#36d79a", false: 'grey'}}
thumbColor={{true: "#36d79a", false: 'grey'}}
/>
<Input style={{ flex: 1 }} right placeholder="Type your custom question here." iconContent=
{<Block />}
/>
</View>
Add justifyContent: 'space-between' to your main View.
Alternatively, you can always use placeholder views:
<View style={{ flex: 1 }}. You would put that placeholder between the Switch and the Input.
Hey so I'm very inexperienced with coding and react-native in general, but I'm trying to create a modal which pops up with a little info box for the user and blurs out the background page. I was able to get a modal working and tweaked it for my specifications until it works great! I imported the library 'expo-blur' and found an example online of it being used, but I can't figure out how I would implement the blur into my Modal. Please any help with this would be extremely appreciated! I've attached images of my Modal code and the expo-blur example I found, below.
Modal
BlurView example
I had the same problem and I have just found this example. Now it works.
https://github.com/Kureev/react-native-blur/issues/105#issuecomment-257872152
In the example he is using class components, I'm using function components. The problem was I wasn't using transparent={true} for the modal
This is my code to make it work:
<Modal visible={filterScreen} animationType="slide" transparent={true}>
<View style={{ marginTop: 100, flex: 1 }}>
<BlurView
intensity={100}
style={[styles.nonBlurredContent, { height: "100%" }]}
>
<Text>Hello! I am bluring contents underneath</Text>
<Text>Hello from the modal</Text>
<TouchableOpacity
style={{ backgroundColor: "red", width: 30, height: 30 }}
onPress={() => setFilterScreen(!filterScreen)}
>
<Text>X</Text>
</TouchableOpacity>
</BlurView>
</View>
</Modal>
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>
I've been tackling this issue for a few weeks, and it's driving me insane.
Basically, I have a Modal component that nests a form. The form is a bunch of TextInput components, at the heart of everything. One of the components in the form is an Autocomplete, from React Native Autocomplete Input. The problem is that I'm able to put the results list from Autocomplete in front of everything else, but my touches pass right through the container and focuses on the TextInput behind the results list. I'm not able to change the order of components, so I can't just put this one input after everything else.
The general setup of the form is below:
<Modal>
<TouchableWithoutFeedback>
<View style={containerStyle}>
<TouchableWithoutFeedback>
<View>
<CardSection style={sectionStyle}>
<Input
...props...
/>
</CardSection>
<CardSection style={acSectionStyle}>
<Text style={labelStyle}>Brand *</Text>
<View style={acContainerStyle}>
<Autocomplete
autoCapitalize='none'
autoCorrect={false}
listStyle={acListStyle}
data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
renderItem={this.renderItem.bind(this)}
hideResults={this.state.hideResults ? this.state.hideResults : undefined}
onBlur={() => this.setState({ hideResults: true })}
onFocus={() => this.setState({ hideResults: false })}
/>
</View>
</CardSection>
<CardSection style={sectionStyle}>
<Input
...props...
/>
</CardSection>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
I had to stack the TouchableWithoutFeedback components in order to make the modal behave. There's more props in the components, but I only kept what was relevant.
My renderItem method is:
renderItem(brand) {
return (
<TouchableOpacity
style={{ width: '100%', height: 25 }}
onPress={() => {
this.setState({ pBrand: brand.trim(), query: brand.trim() });
}}
>
<Text style={styles.listItemStyle}>{brand}</Text>
</TouchableOpacity>
);
}
I don't believe it's a styling issue, but I've added the styles that deal with zIndex just in case:
containerStyle: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
position: 'relative',
flex: 1,
justifyContent: 'center',
zIndex: 1
},
acSectionStyle: {
justifyContent: 'center',
zIndex: 2,
height: 40
},
acContainerStyle: {
right: 0,
width: '75%',
flex: 1,
position: 'absolute',
zIndex: 2
}
The default keyboardShouldPersistTaps for Autocomplete is always. All of the questions I've seen suggest to set a higher zIndex (which isn't a problem - I can see the list, but if I tap on it, the tap goes through to the TextInput behind it), change the order of components (which I can't do), set onStartShouldSetResponderCapture to true (which didn't work), or mess with Pointer Events, none of which worked.
I'm using React Native V0.57.1, an actual Android device, and the project is built with Expo.
Finally, I've recorded a small demo for what my problem is. When the cursor re-appears, that's when I clicked on a result.
Is there just something I'm missing? I've only been writing in React Native for a few months so that's a definite possibility. I come from a web development background, so I thought that if a component was on top (thanks to zIndex), I'd be able to tap on it and not through it by default.
Edit: While messing around, if I change acSectionStyle to a height big enough for the dropdown, then the dropdown works how it should. The issue comes in when a sibling CardSection is being covered. The other CardSection takes precedence.
So, I finally found a workaround. Whether it's correct or not, which I feel like it isn't, at least it works!
I ended up taking the Autocomplete component (along with its' view) outside of the CardSection, but leaving the label in it, like so:
<CardSection style={acSectionStyle}>
<Text style={labelStyle}>Brand *</Text>
</CardSection>
<View style={acContainerStyle}>
<Autocomplete
autoCorrect={false}
listStyle={acListStyle}
// Text input container
inputContainerStyle={acTextContainerStyle}
style={acTextStyle}
placeholder='China Glaze'
data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
renderItem={this.renderItem.bind(this)}
hideResults={this.state.hideResults ? this.state.hideResults : undefined}
onBlur={() => this.setState({ hideResults: true })}
onFocus={() => this.setState({ hideResults: false })}
/>
</View>
Then, and this is the part I think is wrong, I just played with the absolute-positioned view until I moved it far enough down to line up next to the label:
labelStyle: {
fontSize: 18,
paddingLeft: 20,
flex: 1
},
acContainerStyle: {
right: 0,
top: 102,
width: '72%',
flex: 1,
position: 'absolute',
zIndex: 10
}
I would love if someone has a better solution, but this is the best I could come up with. I try to avoid moving views with hard coded values just for scaling purposes, but it seems like this is the only option.