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
Related
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.
Is there a way to apply a shadow AND a borderRadius to a View component, with the shadow following the rounded corners ?
Currently you have to set overflow: 'hidden' for borderRadius to work, but doing so removes the shadows.
It apparently is an old and known issue in React Native, likely not going to be fixed in the near future. A workaround was proposed in this issue, of superposing two Views but no code sample was given.
Can anybody give a code example of this proposed solution ? Will it follow the rounded corners (I doubt it) ?
Is there a package with some native binding voodoo doing the trick ?
Is there another solution ?
I already tried the solution from this question but it did not work for a View, the borderRadius prop does not work and triggers a warning advising to nest it in a style prop.
You can make use of this tool to generate parameters to shadows for both android and iOS.
And the trick is to make two Views, one for shadow with transparent background, other for the Content itself, both of them with the same borderRadius so a basic card will look like this:
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
export default () => {
return (
<View style={styles.cardShadow}>
<View style={styles.cardContainer}>
<Text> Card Content </Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
cardShadow: {
borderRadius: 16,
backgroundColor: 'transparent',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
cardContainer: {
backgroundColor: '#fff',
borderRadius: 16,
overflow: 'hidden',
},
});
In essence this is what you need to make a View with shadow and rounded corners, you could add also some margin/padding and flexbox to make a nice floating card.
Yeah this is what they meant by that:
const shadowsStyling = {
width: 100,
height: 100,
borderRadius: 10,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
<View styles={shadowsStyling}>
<View styles={{width: '100%', height: '100%', borderRadius: 10, overflow: 'hidden'}} />
</View>
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 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 :)
I am having layout issue with ScrollView
When I use View it was displaying like this.
http://collabshot.com/show/Kis4aJ
http://pastebin.com/Yagt8X38
When I changed it to scrollview
http://collabshot.com/show/f3lEtM
http://pastebin.com/zK0HnjaN
And here are the styles
content: {
flex: 1,
paddingTop: 10,
paddingLeft: 10,
paddingRight: 10,
flexDirection: 'column',
backgroundColor: '#000000',
},
transmit: {
height: 100,
borderWidth: 1,
},
messages: {
flex: 1,
backgroundColor: '#ffff00',
}
Looking for help.
Thanks
Don't forget to set a height on the container around your ScrollView.
I guess in ScrollView we need to use three major things
style
contentContainerStyle
automaticallyAdjustContentInsets ==> either true/false according to your scenario.(An important one to set the contents inside the ScrollView)