Hi everyone I'm trying to use this package. It works like this
My code
import {FloatingLabelInput} from 'react-native-floating-label-input';
//styled components Box=view
<Box my={5} mx={20} bg={'#FFFFF'}>
<FloatingLabelInput
label={'password'}
isPassword
togglePassword={this.state.show}
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
customShowPasswordComponent={<ShowPw/>}
customHidePasswordComponent={<HidePw/>}
/>
</Box>
Output
It's accually fine but theres some white border around. I want to make it like this.It will be icon also here I can make it but I can't make the border
This is happening because inside the package itself the border color is set to #49658c
to fix that, go to the following file inside your project:
node_modules\react-native-floating-label-input\src\styles.tsx
change borderColor to white:
export const styles = StyleSheet.create({
container: {
flexDirection: 'row',
color: '#49658c',
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 12,
paddingHorizontal: 11,
backgroundColor: '#00000000',
paddingTop: 10,
paddingBottom: 10,
alignContent: 'center',
justifyContent: 'center',
},
//....
now start your project again.
Final result after I made these changes:
Related
I'm working on a component in which I use react-native-google-places-autocomplete to fetch and display searched address.My code is:
<View style={styles.mainContainer}>
<GooglePlacesAutocomplete
styles={{
textInput: {
fontSize: 20,
flex: 1,
borderBottomColor:"blue"
borderBottomWidth: 3,
},
poweredContainer: {
justifyContent: 'flex-end',
alignItems: 'flex-start',
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7,
borderColor: "#fff",
borderTopWidth: 1
},
row: {
backgroundColor: '#fff',
height: 70,
fontSize: 18,
flexDirection: 'row',
},
separator: {
height: 0.5,
backgroundColor:"gray" },
minLength={2}
placeholder="Enter an address...."
fetchDetails={true}
onPress={(data) => {
setData(data)
}}
query={{
key: googlePlacesAPI,
'country:us', }}
/>
</View>
The issue is that there is no spinner to display when data is fetching. How can I add a spinner so when user starts typing in,spinner displays and when results are fetched, spinner goes away. I've read forum on github and looks like this library doesn't have additional prop for spinner, and I can't figure out myself how to add a spinner. I'm new to react native so any help and suggestion is greatly appreciated.
There are PRs mentioned in react-native-google-places-autocomplete that can give what you want, but it's not merged yet so you need to change your code in node_modules like in one of PRs to get what you want(You can patch-package the react-native-google-places-autocomplete after that to commit the changes).
1.Feature/typing loader
2.Feature: Display loader while loading results
const styles = StyleSheet.create({
container: {
fontSize: 15,
alignItems: 'center',
justifyContent: 'center',
},
insideText: {
width: 30,
height: 30,
alignSelf: 'center',
},
})
<Text style={styles.container}>
<Image style={styles.insideText} source={myImage} />
test
</Text>
When I implement this functionality with Swift
Fixed by setting NSAttachment bounds.
But React Native does not know how to access those parameters.
The output of my code.
How do I center text and images?
can not divide a view into several.
Because the content is flexible, it is not known how many it will be.
Smaller image sizes will center them
The image is too small.
I want to keep the image size.
It's probably not the nicest way but you could do this:
const styles = StyleSheet.create({
container: {
fontSize: 15,
height: 30,
paddingTop: (30 - 15) / 2,
paddingLeft: 30
},
insideText: {
width: 30,
height: 30,
position: 'absolute',
left: 0,
top: 0,
},
})
Not exactly sure what you mean by the requirement of flexible content, but nesting an Image within a text does not seem like the way to go.
You'll have less styling flexibility, and are very limited.
To affect what you want without setting absolute positioning, just wrap it and have the icon and text as siblings of a parent View:
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<Image style={styles.insideText} source={snackIcon} />
<Text style={styles.container}>test</Text>
</View>
Fortunately your styles for insideText and container are fine for this example :)
Here's a snack of the code:
https://snack.expo.io/#paullyfire/centered-image-text-container
Let me know if you have any issues.
I'm working with React Native elements searchbar and am struggling to get these two little lines on the top and bottom to go away - I can't figure out what they are:
Weirdly formatted Searchbar image here
This is my searchbar code:
<SearchBar placeholder="Search contacts..."
data={this.state.searchResultFriendsList}
ref={(ref) => this.searchBar = ref}
style= {styles.searchbar}
lightTheme round
containerStyle={styles.searchcontainer}
/>
And here are my two style snippets:
searchcontainer: {
backgroundColor: 'white',
borderWidth: 0, //no effect
shadowColor: 'white', //no effect
},
searchbar: {
width: "100%",
backgroundColor: 'red', //no effect
borderWidth:0, //no effect
shadowColor: 'white', //no effect
},
If I change the theme from lightTheme to the default, the lines become darker grey so I know it's related to the SearchBar element itself but hasn't been able to get rid of it by changing the border or shadow.
Wondering if anyone has experienced anything like this before, thanks in advance!
Use borderBottomColor and borderTopColor as transparent with searchcontainer
searchcontainer: {
backgroundColor: 'white',
borderWidth: 0, //no effect
shadowColor: 'white', //no effect
borderBottomColor: 'transparent',
borderTopColor: 'transparent'
}
Hope this will help
in new version of react native elements
containerStyle={{
backgroundColor:"#FBFBFB",
borderBottomColor: 'transparent',
borderTopColor: 'transparent'
}}
For anyone else looking to remove those borders try setting the width of every border separately:
containerStyle={{
borderWidth: 0, //no effect
borderTopWidth: 0, //works
borderBottomWidth: 0, //works
}}
Full Code :
import {SearchBar} from 'react-native-elements';
<SearchBar
placeholder="Rechercher"
onChangeText={this.updateSearch}
value={search}
containerStyle={styles.searchBarContainer}
inputContainerStyle={styles.searchBarInputContainer}
inputStyle={styles.searchBarInputStyle}
leftIconContainerStyle={styles.searchBarLeftIconContainer}
rightIconContainerStyle={styles.searchBarRightIconContainer}
lightTheme
placeholderTextColor={styles.placeholderText}
round
showCancel
underlineColorAndroid={styles.placeholderText}
cancelButtonTitle
searchIcon={() => <Image source={searchIcon} style={styles.search} />}
/>
searchBarContainer: {
backgroundColor: COLORS.SEARCHBAR,
alignSelf: 'center',
flexDirection: 'row',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
borderBottomColor: 'transparent',
borderTopColor: 'transparent',
},
Why does iOS not center the text input control?
I am including the render and stylesheet
code:
left android, right ios
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(text) => this.setState({text})}
underlineColorAndroid='rgba(0,0,0,0)'
value={this.state.text}
placeholder= 'username'
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#13493A'
}
input: {
height: 40,
width: 250,
borderRadius: 5,
backgroundColor: '#598176',
color: 'white',
marginTop: 30,
textAlign: 'center'
}
});
Thank you in advance,
Anthonie
Looking on the issue tracker, this appears to be a bug in React Native on iOS: #11892 So your code should work but doesn't. There is a listed workaround which is to add alignSelf: 'center' to the TextInput's styles (see example).
Here is my code. I want the product view to take up 90% width of its parent. However, the settings below are not working.
...any idea how to achieve it without using dimensions?
return (
<LazyloadScrollView
style={styles.container}
contentContainerStyle={styles.content}
name="scrollImage" >
{list.map((product, i) => <View key={i} style={styles.product}>
<LazyloadImage
host="scrollImage"
style={styles.image}
source={image}
animation={false}>
<View style={styles.id}>
<Text style={styles.idText}>{product.id}</Text>
</View>
</LazyloadImage>
</View>)
}
</LazyloadScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
content: {
paddingTop: 20,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee'
},
product: {
flex: 0.9,
marginTop: 5,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
Why not use Dimensions? It will enable your app to be responsive.
If you don't want to use dimensions, try some style settings in the container and it's children, for example, make it full width with padding
container: {
backgroundColor: '#ffffff',
alignSelf: 'stretch',
padding: 30
}
I don't know if it works because you would have to post the rest of the code to test it but keep playing with the style and flex properties until you make it work, shouldn't take long.
Btw, always good to revisit the official layout props docs from react native
And css tricks guide to flexbox