We Keep Coding

How to fix Error not warning: ERROR VirtualizedLists should never be nested inside plain ScrollViews. Even when ScrollViews isn't used

I am trying to build a react-native app, and I want to build a layout where I have components in a vertical manner and a transaction history, I am stuggling with the component to view transaction history which I am populating from a dummy data, I am faced with an error "VirtualizedLists should never be nested inside...". Even when I am not using ScrollViews. I have tried a couple of stackoverflow answers but it is still the Error (Not warning). Here is my Code:
`
import React from 'react';
import {View, Text, FlatList, TouchableOpacity, Image} from 'react-native';
import {colors, SIZES, fonts, icons} from '../global';
const TransactionHistory = ({customContainerStyle, history}) => {
const renderItem = ({item}) => (
<TouchableOpacity
style={{
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SIZES.base,
}}
onPress={() => console.log(item)}>
<Image
source={icons.transaction}
style={{
width: 30,
height: 30,
tintColor: colors.primary,
}}
/>
<View style={{flex: 1, marginLeft: SIZES.radius}}>
<Text style={{...fonts.android.h3}}>{item.description}</Text>
<Text style={{color: colors.gray, ...fonts.android.body4}}>
{item.date}
</Text>
</View>
</TouchableOpacity>
);
return (
<View
style={{
marginTop: SIZES.padding,
marginHorizontal: SIZES.padding,
padding: 20,
borderRadius: SIZES.radius,
backgroundColor: colors.white,
...customContainerStyle,
}}>
<Text style={{...fonts.android.h2}}>Transaction History</Text> //Transaction History Heading
<FlatList
contentContainerStyle={{marginTop: SIZES.radius}}
scrollEnabled={false}
data={history}
keyExtractor={item => `${item.id}`}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
ItemSeparatorComponent={() => {
return (
<View
style={{
width: '100%',
height: 1,
backgroundColor: colors.lightGray,
}}></View>
);
}}
/>
</View>
);
};
export default TransactionHistory;
`
What I tried?
One of the answers was to change the ScrollView tag to View, but I already used the view tag and not ScrollView.
Change ScrollEnabled to be False. This was false initially.
According to this solution (React-Native another VirtualizedList-backed container). I used I created the Flatlist outside of the View and used ListFooterComponent to call it. Still the same Error.
Expected Outcome:
I am Meant to have the populated data after the Transaction History Heading. Please let me know, if there is any solution to this, or another way to fufill the task. Thanks

I had a similar issue once where I was using a ScrollView in a shared Container parent component. Maybe worth checking again to see if TransactionHistory isn't nested under and ScrollView parent somewhere on the Screen.
Once I figured it was nested under a ScrollView, I essentially removed the Container and added the header and footer component around my SectionList using the ListHeaderComponent and ListFooterComponent props on the SectionList achieving the same functionality of having a ScrollView parent.
Example:
<SectionList
renderSectionHeader={renderSectionHeader}
sections={data}
ListHeaderComponent={Header}
renderItem={renderItem}
contentContainerStyle={{ paddingBottom: bottom }}
/>
More info here

Why are views not displayed in react-native?

I am learning react-native and am very new to it. So, when I was learning to use flexbox, I ran into an issue. The issue was, the views are not being displayed when inside another view. My code =
import React from "react";
import { View, StyleSheet } from "react-native";
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View backgroundColor="red" />
<View backgroundColor="blue" />
<View backgroundColor="green" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
export default App;
If you run this program, you will get a blank screen. I don't know why this is happening, and I also want to know how to fix it. By the way, I am running it in Iphone 11 simulator

You have set BackgroundColor directly to the View which is not possible. It has to be in the "Style" param. Also you have no height and width set to the View.
You can either do it inside the View directly like this:
<View style={{ backgroundColor: "red", height: 20, width: "100%"}} />
or create a new Style in your StyleSheet and then pass that to the View.

The text of button at react native is always uppercase

I created a component at react-native, but the text of the button is always at uppercase, someone knows why it doesn't take the text that pass, because I want to show 'Login', but it shows 'LOGIN'
import React, { Component } from 'react';
import { View, Button} from 'react-native';
import LabelApp from "../../config/labels.app";
const labelApp = LabelApp.loginView;
export default class Login extends Component {
constructor(props){
super(props);
this.handleClickBtnEnter = this.makeLogin.bind(this);
}
makeLogin() {
}
render() {
return (
<View>
<Button title= {labelApp.textButtonLogin} onPress={this.handleClickBtnEnter}/>
</View>
);
}
}
Label of component
const LabelApp = {
loginView: {
textButtonLogin: 'Ingresar',
},
}
export default LabelApp;
The visualization

For react Native Paper button use uppercase={false} prop:
<Button
mode="outlined"
uppercase={false}
accessibilityLabel="label for screen readers"
style={styles.yourButtonStyle}>Button label</Button>

So, the other two answers are correct that you should use TouchableOpacity, but as someone new to React Native, it took me awhile to understand what was going on here. Hopefully this explanation provides a little more context.
The built-in Button component seems to have some weird compatibility/visibility issues on occasion, one of which is rendering the title prop text all uppercase. When viewing the documentation for the Button component in Chrome, the preview shows all text being capitalized under the "Web" view but not Android or iOS (I was having this issue using Expo and Metro Bundler on an Android device, so not sure what to make of this). I couldn't find anything about capitalization/uppercase in the Button docs, so perhaps this is a bug.
The solution is to use a different component called TouchableOpacity. It also has an onPress event you can use and a built-in touch animation, but it has less out of the box styling than the Button component. Important to note from docs: "Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout." It doesn't have a title prop, so you just put the button text in a Text component, like so:
<Button
title='text will be capitalized'
onPress={onPress}
/>
becomes
<TouchableOpacity onPress={onPress}>
<Text>text will stay lowercase</Text>
</TouchableOpacity>
I was having the same issue as OP, and this solved it for me.

From the official documentation
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
The recommend use of touchable opacity or touchable native feedback
https://facebook.github.io/react-native/docs/touchableopacity
Below I've added textTransform: 'lowercase', as a style rule for the button to override any inherited text casing.
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
export default class App extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
onPress = () => {
this.setState({
count: this.state.count+1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text> Touch Here </Text>
</TouchableOpacity>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{ this.state.count !== 0 ? this.state.count: null}
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
textTransform: 'lowercase', // Notice this updates the default style
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
}
})
https://snack.expo.io/Bko_W_gx8

This question is 3 years old and I'm not sure why no one has answered it correctly until now.
Native android buttons are all caps by default starting from android lollipop, which is what react native uses when you use the control Button from react-native in your app. To override the functionality, you just need to add this line in your styles.xml file inside your app theme (not the splash screen style)
<item name="android:textAllCaps">false</item>
You can get more details here: https://stackoverflow.com/a/30464346/11104068
The changes are not going to apply instantly obviously since the change is in the naive xml file and not in a JavaScript file. So you will need to do a npm/yarn run android

I've tried your code and it looks like it's the expected behaviour with Button component from react-native
You can see this at the official documentation
I believe that you need to change Button component, take it from another package to meet your needs.
As an alternative you can create your own button
import React, { Component } from 'react';
import { View, Button, TouchableHighlight, StyleSheet } from 'react-native';
import LabelApp from "../../config/labels.app";
const labelApp = LabelApp.loginView;
export default class Login extends Component {
constructor(props){
super(props);
this.handleClickBtnEnter = this.makeLogin.bind(this);
}
makeLogin() {
}
render() {
return (
<View>
<TouchableHighlight onPress={this.handleClickBtnEnter} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>{labelApp.textButtonLogin}</Text>
</View>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
marginBottom: 30,
width: 260,
alignItems: 'center',
backgroundColor: '#2196F3'
},
buttonText: {
textAlign: 'center',
padding: 20,
color: 'white'
}
});

<Button
style={{
borderRadius: 10,
backgroundColor: "#000",
width: 200,
height: 50,
}}
>
<Text
uppercase={false}
>
Login
</Text>
</Button>

Style for nested Text is not working react-native

App.js:
import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>
<Text>First</Text>
<Text style={{ borderBottomWidth: 1 }}>Second</Text>
<Text>Third</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#ECF0F1"
}
});
As you can see, we have nested <Text> components. The problem is some style props such as borderBottomWidth - marginVertical - width is NOT working for the nested components!
Any idea for solving this issue?
Thanks in advance!

I'm not sure why the (width, marginVertical) are not working but I know that you should specify the (borderStyle=solid, borderColor) so that you can see it.I think that's the problem, hope it helped.
But I should say that it might not be it cause I came across your question by trying to ask one, and for me all the styles did not work, not only that but it's raising an error and it does not run at all, this strange behavior only happen to Text component whether nested or not.

Image rendering issues React Native

I am building a react native app using mock data. I am able to render some of the mock data in a flatlist but the image will not render. In the react native devtools it shows the image url but no style is shown even though I have the style in the Stylesheet element.
import React, { Component } from "react";
import { StyleSheet, Text, View, Image, ListView } from "react-native";
class BookItem extends Component {
render(){
return (
<View style = {styles.bookItem}>
<Image style = {styles.cover} /> //is this the issue?
<View style = {styles.info}>
<Text style = {styles.author}>{this.props.author}</Text>
<Text style = {styles.title}>{this.props.title}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
bookItem: {
flexDirection: "row",
backgroundColor: "#FFFFFF",
borderBottomColor: "#AAAAAA",
borderBottomWidth: 2,
padding: 5,
height: 175
},
cover: {
flex: 1,
height: 150,
resizeMode: "contain"
},
info: {
flex: 3,
alignItems: "flex-end",
flexDirection: "column",
alignSelf: "center",
padding: 20
},
author: { fontSize: 18 },
title: {fontSize: 18, fontWeight: "bold"}
});
export default BookItem
Im not sure if I am using the Image element in react native properly. This could be the issue. For the most part it shows the data in the devtools

You have to use image with source property. If you want to to add a just background you should use just View with background style.
Look at the official doc from here
Example is at the below.
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

You mentioned a flatlist but the code sample you provided does not have a flatlist.
Refer to the documentation for more information.
https://facebook.github.io/react-native/docs/image.html
Here are the examples provided in the documentation.
<Image
source={require('/react-native/img/favicon.png')}
/>
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
<Image
style={{width: 66, height: 58}}
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>
Could you maybe mock up your problem for us?
https://snack.expo.io/

Two things: Image component needs a source prop to render an image and second, try not to use flex with images. Usually they need width AND height property manually set to render properly.

Change the value for resizeMode to cover instead of contain. This has resolved the same issue for me.

I had the same problem, i suggest you update react-native to version 0.63.3
It will probably cause errors, in which case you could use this React-Native upgrade helper.
https://react-native-community.github.io/upgrade-helper/