I'm trying to add an image to left of my TextInput field but it's not working. I already tried putting the path, just the name of the image and also tried with require('path/to/image') but nothing seems to work.
I have something like this
<TextInput
value={this.state.value}
onChangeText={ (value) => this.setState({value})
inlineImageLeft="path/to/image"
/>
UIExplorer has an example on it, under the title 'Inline Images'.
react-native/Examples/UIExplorer/js/TextInputExample.android.js
It seems path should be relative to ./android/app/src/main/res/drawable/. Any other path does not work. Also image does not scale.
<TextInput inlineImageLeft="ic_menu_black_24dp"/>
follow the react native documentation and after adding images to drawable folder clean the project from build option in android studio and rerun the project with react-native run-android. it worked for me
This might not be the optimal solution but it worked for me. I created a flex with the icon on the left and the TextInput on the right. I styled it to my liking and created a box with a white background that encompasses both. Here is my css styling code:
container: {
flex: 1,
width: '100%',
height: '100%',
backgroundColor: '#f5f7fa',
justifyContent: 'flex-start',
alignItems: 'center',
},
inputBox: {
flex: 0,
flexDirection: 'row',
width: '90%',
backgroundColor: 'white',
borderRadius: 4,
margin: 5,
borderColor: '#c4c6c8',
borderWidth: 1,
},
textInputs: {
height: 60,
width: '86%',
backgroundColor: 'white',
borderRadius: 4,
color: '#c4c6c8',
}
If you are not familiar with Flexbox, you can also look at the following article:
https://medium.com/#drorbiran/the-full-react-native-layout-cheat-sheet-a4147802405c
and this website let's you play with the properties in live mode:
http://flexbox.buildwithreact.com/
I hope this helps :)
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
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:
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 use react-native-elements, and they make it easy to make an actual button appear "raised", or shadowed. I want to duplicate this look for TouchableOpacity.
Here's an example of the "raised buttons" with react-native-elements.
It is subtle, but noticeably makes a nice impact.
How would you go about mimicking this effect with TouchableOpacity?
And yes, I've gone through the docs. If I missed anything, please point it out... but I don't think anything is there to accomplish this. Thanks.
You can add the following styles to your TouchableOpacity to make it raised.
<TouchableOpacity style={styles.button} />
button: {
shadowColor: 'rgba(0,0,0, .4)', // IOS
shadowOffset: { height: 1, width: 1 }, // IOS
shadowOpacity: 1, // IOS
shadowRadius: 1, //IOS
backgroundColor: '#fff',
elevation: 2, // Android
height: 50,
width: 100,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
You can read more about them here.
IOS Specific Props
Android Specific Props
I'm designing a react-native application based on chat-platform. I'm currently stuck with the UI issue:
As you can observe, when I rotate the mobile screen, the textbox does not cover up the full-width space. I'm new to React-native and I tried a lot to fix this issue. I also used flex: 1 in the textBox which seems to work and filled up the whole width of the screen but it hides microphone icon and add files icon (+) from the screenshot-1 (i.e when mobile is in vertical position)
Here is the code:
export default StyleSheet.create({
textBox: {
backgroundColor: '#fff',
flex: 0,
alignItems: 'center',
borderTopWidth: 1,
borderTopColor: '#D8D8D8',
zIndex: 2
},
textArea: {
flexDirection: 'row',
alignItems: 'center',
flexGrow: 0,
backgroundColor: '#fff'
},
textBoxInput: {
textAlignVertical: 'center',
maxHeight: 120,
flexGrow: 1,
width: 1,
// paddingVertical: 12, needs to be paddingTop/paddingBottom because of iOS/Android's TextInput differences on rendering
paddingTop: 12,
paddingBottom: 12,
paddingLeft: 0,
paddingRight: 0
},
For the Android devices, the code seems to work fine. It will be great if anyone can help me out with this issue. :)
Try this
import { Dimensions } from 'react-native';
And then do this
let width = Dimensions.get('window').width
Now use the width variable as a width css property for the element like this.
myElement: {
width: width
}
or this
myElement: {
width: Dimensions.get('window').width
}
Make sure you give this to you outermost element to get the full width of the screen.
There could be many problems involved, however, in my case, to avoid this problems is setting width to '100%'. I don't know if it's the most optimal, but it works for me. Parents containers also should have that value, or at least make sure they fill all screen width