Today i have problem with fitting content in the container in react-native. I used this lib. It is about react-native radio buttons but the content inside that doesn't fit well. Here is the screenshot
When the text is too large it is going outside. so i decide to open code of that button and saw container of the text tag.
centerProductBox: {
flexDirection: 'row',
flex: 6,
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal:4,
},
Should i changed something or any suggestions what i should changed to fix that?
Sorry for my bad English!
Use the boxStyle style prop from the https://www.npmjs.com/package/react-native-radio-buttons library.
Related
I'm working on a React Native app (initially only Web) where we need to separate the roles of developer and styler (i.e. the person responsible for styling the app). With traditional HTML development this is easily done through CSS. In other words, the developer assigns IDs and/or classes to HTML elements, allowing the CSS developer to get to work on the CSS files of the code-base.
Is it possible to do something similar in React Native? In other words, can we change the styles of the various elements of the user interface without needing to modify the code that generates the elements?
Yes. I think the style property of view is pretty similar to CSS, you just need to write a styles.js file separate from your view code. Then your "styler" just need to modify style attributes in that file instead of go into the main code.
Something like this:
Your styles.js
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
backgroundColor: Colors.COLOR_BACKGROUND_LIGHT,
paddingBottom: normalize(50)
},
buttonContainer: {
flexDirection: 'column',
alignItems: 'center',
padding: Dimens.contentPadding
},
inputContainer: {
flexDirection: 'row',
height: normalize(30),
borderBottomWidth: 0.5,
alignItems: 'center',
borderBottomColor: Colors.COLOR_LIGHT_GREY,
},
});
Your index.js
import styles from ".....";
.....
.....
render() {
return (
<View style={styles.container}>
...
</View>
)
}
Hope that help ^^
Good day! I'm creating a mobile application that I want to implement it with different color of shadows. But I tried to change hex code of colors but it does not change it is always black. How can I do it both Android and iOS platform? If impossible, suggest me any custom to create a different color of shadow. Thank you!
I haven't use shadows before, but I found someone suggest use cardview instead view to show shadow effect on both android and ios. And same suggest in many different places, maybe you can try to see. Hope it helps.(I'm not sure if it could change color from using background color)
<CardView
cardElevation={3}
cardMaxElevation={3}
cornerRadius={3}
style={{
height: 60,
justifyContent: 'center',
alignItems: 'center',
margin: 20,
backgroundColor: '#ffffff' //color?
}}
<Text>
Elevation
</Text>
</CardView>
someones answer on github
react-native-cardview
example
I am writing React Native code using WebStorm. When I am writing auto suggestion for code is not working. I have tried following steps: it's working for some syntax and not for other:
Go to Settings->(Ctrl + Alt + S) -> Languages & Frameworks
Expand JavaScript->Library
When using React, I suggest to add: react , react-dom, react-native (if you interested in mobile dev)
Click Apply when you done
I have tried above but the issue is at while writing styles
container: {
margin: 10,
padding: 10,
borderColor: 'black',
borderWidth: 1,
height: 200,
flexDirection: 'row',
justifyContent: 'space-between'
}
it is not showing suggestion for 'space-between' in justifyContent and row/column in flexDirection etc.
How to solve this?
Known issue, please follow WEB-38735 for updates
I made a <View> object in react native containing, in a row, multiple <View> objects that contain text objects.
When the text is more than 1 line, the text containers do not expand to fill the parent component and it looks funny.
Screenshot:
This is the style code:
bigContainer: {
flex: 1,
justifyContent: 'center',
// flexDirection: 'row'
},
textContainer: {
flex: 1,
paddingLeft: 0,
paddingRight: 0,
borderRightWidth: 1,
borderRadius: 0,
borderColor: 'rbga(0, 0, 0, 0.1)',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 7,
paddingBottom: 7,
overflow: 'hidden'
},
text: {
fontSize: 18,
textAlign: 'center'
},
Please help, I do not understand why this happens since I have flex: 1 and my research has not helped me. Thanks !!
UPDATE: SOLVED: I forgot that <TouchableOpacity>, the container that encloses the text container, also behaves like a flexbox
In React Native flex works a bit differently, as it only accepts a single number. This is because of the Yoga layout engine facebook uses
flex: 1 does not mean "grow as much as you need to". When you assign a group of child components that property, what you're essentially saying is that each element with the flex: 1 property should take up as much space as each other element. Think of flex: 1 as assigning a ratio. If you have 1 element with no siblings, it will attempt to fill all available space. If you have 4 elements and they are all siblings, and they are all set to flex: 1 then each will take 1/4 (25%) of the available space.
This can be manipulated as well, say you have 4 elements and 3 of them are set to flex: 1. You can set the 4th to flex: 2. That 4th element will now use twice as much space as the other components (40% of available space as opposed to 20%). Flex can also be set to a negative number, which means it will shrink to it's min height and width when needed.
This behavior is pretty much identical to how the flex-grow property works in CSS. If you want to manipulate the initial size of a flex container without respect to it's siblings, you should use the flex-basis (flexBasis in react) property. flexBasis: content will resize the container based on it's content. flexBasis also accepts a number, if you would like to manually set the initial width of your containers.
While checking out the tutorial here: https://facebook.github.io/react-native/docs/flexbox.html#align-items, I was unable to get the alignItems value to align the rows without any space between when I added flexWrap:'wrap' to the parent view (and enough child views such that it'd wrap). Flexbox acted as if it had a 'space-between' requirement for the rows.
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
flexWrap:'wrap',
alignItems: 'flex-start'
}}>
** Enough Views to get a wrap **
</View>
Setting flex:0 gets me the results I wanted:
The same behavior is expressed when I use flexDirection:'column', except no matter what I set the flex value to, I get the unwanted behavior:
Am I using flexbox incorrectly? Or is this a bug inside of react-native's flexbox?
With the newest version of React Native v0.43.1, this issue is fixed and alignContent is exposed in React Native.