Hello guys I put 4 images in a json and tried to loop through them with map function but i want it to get back to the line every time it renders 2 how can I make that ?
like on the first line it renders the first two with the flex direction = row then it gets back to the line and renders the other 2
You can use a FlatList and define numColumns
Related
I am new to react native. Please tell Me is it possible to set like this = ten digit must in InputText field in react native
for example Mobile Number must be 10 digit Not more that 10 digit are allowed And not less 10 digit are allowed. Please tell me How can set that
There are several ways you can achieve this depending on what you prefer.
The first way is to run and changeHandler function on <Text onChangeText={(value) => onChangeHandler(value)} /> and make a check inside the function like this- if (value.length !==10) return or you can show an Alert displaying a message - The mobile number must be 10 digit.
The other way is by using any validation library like simple-react-validation is one which has on option to set the size of input element.
How can I get the number of lines of Text component in React Native?
I want to show "Read more button" if the number of lines of text component is over 4.
Is there any props to get the number of lines?
I already know there is a numberOfLines props in Text Component but it's just about setting the number of lines. Am I right?
In current version this feature is not available in RN, But there is the best library you can use
react-native-read-more-text which will give results as you want.
from onContentSizeChange props of textinput you will get height and then divide the height to get number of lines
onContentSizeChange={e =>
console.log(e.nativeEvent.contentSize.height)
}
for more check documentation
I am trying to place some text in react native using the Text component and I am wondering how I would go about using it to place <-> in text in react native. I have tried placing it in the Text component like this
<Text><-></Text>
but this leads to errors and the app crashing.
the output I would like is for the text to look like this
Process 1 <-> Process 2
but errors come up instead.
The only character that cannot be rendered normally in a Text it's < so you must put it inside curly braces as you were passing a variable.
Bad
<Text><</Text>
Good
<Text>{'<'}</Text>
Therefore you can do something like this:
<Text>Process 1 {'<'}-> Process 2</Text>
or like this:
<Text>{'Process 1 <-> Process 2'}</Text>
to display any characters in Text do this
<Text>{"Process 1 <-> Process 2"}</Text>
You can use the back quote `` to achieve what you want. Inserting reserved characters (< or >) as plain text can be done as shown below:
<Text>
{`Process 1 <-> Process 2`}
</Text>
That should work as you intend
How to make the text display from the position marked red？
enter image description here
You can add empty space for that, like this
<Text>{'This is first line text'}<Text>{' this is second line text'}</Text></Text>
I am using react-native-router-flux for the navigation in my react-native mobile app.
I want to call Actions.sceneKey() from drawer using a variable sceneKey which will be based on the store state.
Let's say, there are 3 menus in drawer:
menu1
menu2
menu3
I just want to call Actions.{{ selectedMenu }}, is this somehow possible?
You can use bracket notation, see property accessors.
Here is a example of how you can use it:
const selectedMenu = 'menu1'; //menus values coming from your store
Actions[selectedMenu]();
Make sure the variable is of type string and matches one of your defined routes.