I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true}) I would like the buttons to wra...

I want to render 7 buttons in a row with equal width to fill up all the available space horizontally. render() { return ( <FlatList data={this.state.days} renderItem={({ item }) => <V...

Background I have an image meant to be displayed while other content is loading. I want it to be centered and look the same on all devices. Problem Currently, the image shows up at the top left. ...

How can i reproduce flex-direction: row-reverse in React-Native? When in element' style i'm doing: flexDirection: 'row-reverse' i'm getting error: Invalid prop flexDirection of value row-rev...

I'm trying to create a horizontal FlatList that has some spacing around it. I was able to get the beginning spacing correct with paddingLeft on the list, but paddingRight on the list doesn't seem t...

Suppose this is the layout: <View style={styles.container}> <View style={styles.titleWrapper}> ... ... </View> <View style={styles.inputWrapper}> ... ... </View&...

I am trying to render the list of items like in this image. Items in each row will vary based on their text size. Flatlist is using for rendering items. TagView.js <View style={styles.tagVie...

I am using react native web library but I can't make full height on web Code: import React from 'react'; import {StyleSheet, View, Text, TouchableOpacity} from 'react-native'; class index extend...

I have a ScrollView which content doesn't necessarily exceeds it's size. Let's say it's a form where, upon errors, it expands to add error messages and then it exceeds the ScrollView size and thus ...

I am trying to implement a UI layout similar to google maps "explore" on Android, (see gif) in React Native. In my UI design I have app navigation tabs at the bottom of the screen, with a full pag...

I'm trying to use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute ...

this is my component: const styles = { menuContainer: { flex: 1, flexDirection: 'column' }, menuItem: { flex: 1, borderRadius: ?? } } <View style={styles.menuContainer}> <Touch...

in html I can achieve this by <span style="background-color:red">ketan</span> but in react native how to implement this so that color will be applied to the text only.

How to achieve the square layout like the image below? Or any related package exist?

Can I use the justifyContent: 'space-evenly' on any elements in React Native? On which ones? What should the syntax look like? Thanks!

I have a simple View which has two children, another View and a ScrollView. The ScrollView should be 5x higher than the View on the same level, using flexbox. <View style={{ flex: 1}}> ...

I have the following code: renderActionButtons(actionButtons){ let actionButtonsContent = actionButtons.map((button, i) => { return <TouchableHighlight key={i} onPress={() => {this.upd...

So for the above image, I am attempting to get the "green" box to wrap around the dynamic text. Notice how the blue and yellow text boxes are in a flex: 'row' configuration, and the blue box of t...

Here is an example of what am trying to achieve and below is a breakdown of the component structure and this is how currently the code is: <View style={styles.buttonHolder}> <Text styl...

I am trying to design this design react-native. This is what I have coded for this but this is not what I want. This works on one screen only, if I change screen size then things are not working. ...