I have the following section of code. When I put quotes (either single quotes around the integer values in the sections of code marked with Issue n my app crashes without any apparent error message. As soon as I navigate to that page I get a popup box that says: "Unfortunately ExampleApp has stopped." with an "OK" button.
Adding quotes to any of the four marked sections below causes the app to crash. However, if I add quotes around the flex integer, I get a proper error thrown and a red screen is displayed on my phone with the message: Invariant Violation: Invalid prop 'flex' of type 'string' supplied to 'StyleSheet container', expected 'number'.
render(){
const styles = StyleSheet.create({
container: {
flex: 0, //No Issue
padding: 8, //Issue 1
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#C1C1C1',
},
button: {
margin: 5 //Issue 2
}
});
return(
<View style={styles.container}>
<View>
<TouchableOpacity onPress={()=> this.goHome()} style={{marginRight: 20}}> //Issue 3
<Image source={require('../images/pic001.png')} style={{width: 30, height: 30}} /> //Issue 4
</TouchableOpacity>
</View>
<View style={styles.button}>
<Button title="Select" onPress={() => this.selectItem()} />
</View>
</View>
)
}
Is there a reason that quotes would cause my app to crash unexpectedly like this? Why do I get a proper error when the flex value is quoted, but do not get a proper error in any of the other situations.
If it helps, I am developing on Windows 10, connecting to my Android phone (with USB cable for the initial connection).
See also this page for a similar problem.
Related
I am noticing the following code in ReactNative (React 0.59), which represents a single search result item, is sometimes cutting off the last line of text on a client's android phone (but not on any of my android phones or simulators)
<View style={this.props.style}>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.textStyle}>
{this.itemSentences()}
</Text>
</View>
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1, marginTop: -7}}>
<Text style={{color: '#000', fontSize: ellipsisFontSize, fontWeight: '600'}}>{ellipsisText}</Text>
</View>
</View>
In the image below, you can see the effect, which is an incomplete sentence being rendered:
It almost looks like there isn't enough room to render the rest of the text, so it cuts it off. Again, on my phone, it renders the whole paragraph but in the client's screen shot, it is cut off.
Any initial suggestions or things I can do? I tried reducing the font, increasing the font, changing padding, but no luck. What other details can I provide? Thank you!
Edit:
Here is the container the above list items appear in:
<View style={styles.containerStyle}>
<FlatList
onContentSizeChange={ (x, y) => { this.layoutChanged(x, y) } }
onLayout={(event) => this.layoutChanged(event)}
keyboardShouldPersistTaps="always"
keyExtractor={(item, index) => index.toString()}
data={dataSource}
ListFooterComponent={footer}
ListHeaderComponent={header}
scrollEventThrottle={16}
onScroll={this.handleScroll.bind(this)}
language={this.props.language}
renderItem={this.renderItem.bind(this)}
/>
<AnimatedEditedResults
style={[editResultsStyle, {transform: [{translateX: this.state.editResultsOverlayX}]}]}
editResultsXButtonPressed={this.hideEditResultsOverlay.bind(this)}
applyFilterPressed={this.applyFilterPressed.bind(this)}
searchResults={this.props.originalSearchResults.Results}
selectedSources={this.props.selectedSources}
sentenceNumber={this.props.sentenceNumber}
hasMadeChanges={this.props.hasMadeChanges}
clearFilterPressed={this.props.clearFilterPressed}
language={this.props.language}
/>
</View>
Any reason why you cant wrap the component in a ScrollView
After playing with over 100+ different kinds of builds, different attempts, etc. I finally found the issue.
There is a property on called "TextBreakStyle" and by default it is "complex". By changing to "Simple", the issue went away. This apparently only plagues certain types of phones/devices.
Hope this helps someone!
(also posted in https://github.com/facebook/react-native/issues/27583)
Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened...
From the fact that two people marked this question as useful, I understand that I am not the only one having this problem...
I am running a very basic 'app' (a single file, a single component) for which the code is attached below, using React native 0.61.
Developing for android, on windows 10 with genymotion.
Fast Refresh is turned on, but it doesn't seem to work, for example, when:
I am changing the 'Posts' string to 'New Posts'
When I remove the posts button
Only the debug menu's "reload" refreshes the app and renders the changes.
Any idea why?
Here is the code:
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
export const App = () => {
const [resource, setResource] = useState('todos');
return (
<View style={{ flex: 1, alignItems: 'center', marginTop: 30 }}>
<View style={{ flexDirection: 'row', marginTop: 0,
alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => (setResource('posts'))}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Posts
</Text>
</View>
</TouchableOpacity>
<View style={{ width: 20 }} />
<TouchableOpacity onPress={() => setResource('todos')}>
<View style={styles.button}>
<Text style={styles.buttonText}>
Todos
</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
buttonText: {
color: 'black',
fontSize: 20
},
button: {
backgroundColor: '#a8a',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 2
}
});
I've found that sometimes the Metro Bundler gets 'stuck'. That would explain why when you ran it the next day, it worked fine.
When things get weird for (seemingly) no apparent reason, I do:
yarn start --reset-cache
In my case I ran watchman watch-del-all and suddenly I lost fast reload.
Re-installing node_modules and clear & rebuilding app did not help me.
Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened...
Got a hint from this and restarted my computer. Now it works fine.
I had the same issue few minutes back. Fast refresh was not working even though it was enabled. I closed the metro bundle and started the new instance. Worked for me.
I have installed react-native-gridview and after that I am getting this error.
The line number shown in error is Media.js:134. It contains the following code.
<GridView data={this.state.dataList} itemsPerRow={2}
renderItem={(item) => {
return (
<View style={{ flex: 1, backgroundColor: '#8F8', borderWidth: 1, margin: 8 }}>
<Image style={styles.imageThumbnail} source={{ uri: item.path}} />
</View>
);
}}/>
I can't understand why I am getting this error. I am not using any ListView
Please Help. Thanks.
The problem is that react-native-gridview is using Listview in their library as you can see here.
And now react-native stopped giving support to Listviews, rather now you
can use FlatList, SectionList and modify them as per your requirement, as they have more features and stability.
That's why you are getting the above error.
I've been tackling this issue for a few weeks, and it's driving me insane.
Basically, I have a Modal component that nests a form. The form is a bunch of TextInput components, at the heart of everything. One of the components in the form is an Autocomplete, from React Native Autocomplete Input. The problem is that I'm able to put the results list from Autocomplete in front of everything else, but my touches pass right through the container and focuses on the TextInput behind the results list. I'm not able to change the order of components, so I can't just put this one input after everything else.
The general setup of the form is below:
<Modal>
<TouchableWithoutFeedback>
<View style={containerStyle}>
<TouchableWithoutFeedback>
<View>
<CardSection style={sectionStyle}>
<Input
...props...
/>
</CardSection>
<CardSection style={acSectionStyle}>
<Text style={labelStyle}>Brand *</Text>
<View style={acContainerStyle}>
<Autocomplete
autoCapitalize='none'
autoCorrect={false}
listStyle={acListStyle}
data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
renderItem={this.renderItem.bind(this)}
hideResults={this.state.hideResults ? this.state.hideResults : undefined}
onBlur={() => this.setState({ hideResults: true })}
onFocus={() => this.setState({ hideResults: false })}
/>
</View>
</CardSection>
<CardSection style={sectionStyle}>
<Input
...props...
/>
</CardSection>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
I had to stack the TouchableWithoutFeedback components in order to make the modal behave. There's more props in the components, but I only kept what was relevant.
My renderItem method is:
renderItem(brand) {
return (
<TouchableOpacity
style={{ width: '100%', height: 25 }}
onPress={() => {
this.setState({ pBrand: brand.trim(), query: brand.trim() });
}}
>
<Text style={styles.listItemStyle}>{brand}</Text>
</TouchableOpacity>
);
}
I don't believe it's a styling issue, but I've added the styles that deal with zIndex just in case:
containerStyle: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
position: 'relative',
flex: 1,
justifyContent: 'center',
zIndex: 1
},
acSectionStyle: {
justifyContent: 'center',
zIndex: 2,
height: 40
},
acContainerStyle: {
right: 0,
width: '75%',
flex: 1,
position: 'absolute',
zIndex: 2
}
The default keyboardShouldPersistTaps for Autocomplete is always. All of the questions I've seen suggest to set a higher zIndex (which isn't a problem - I can see the list, but if I tap on it, the tap goes through to the TextInput behind it), change the order of components (which I can't do), set onStartShouldSetResponderCapture to true (which didn't work), or mess with Pointer Events, none of which worked.
I'm using React Native V0.57.1, an actual Android device, and the project is built with Expo.
Finally, I've recorded a small demo for what my problem is. When the cursor re-appears, that's when I clicked on a result.
Is there just something I'm missing? I've only been writing in React Native for a few months so that's a definite possibility. I come from a web development background, so I thought that if a component was on top (thanks to zIndex), I'd be able to tap on it and not through it by default.
Edit: While messing around, if I change acSectionStyle to a height big enough for the dropdown, then the dropdown works how it should. The issue comes in when a sibling CardSection is being covered. The other CardSection takes precedence.
So, I finally found a workaround. Whether it's correct or not, which I feel like it isn't, at least it works!
I ended up taking the Autocomplete component (along with its' view) outside of the CardSection, but leaving the label in it, like so:
<CardSection style={acSectionStyle}>
<Text style={labelStyle}>Brand *</Text>
</CardSection>
<View style={acContainerStyle}>
<Autocomplete
autoCorrect={false}
listStyle={acListStyle}
// Text input container
inputContainerStyle={acTextContainerStyle}
style={acTextStyle}
placeholder='China Glaze'
data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
renderItem={this.renderItem.bind(this)}
hideResults={this.state.hideResults ? this.state.hideResults : undefined}
onBlur={() => this.setState({ hideResults: true })}
onFocus={() => this.setState({ hideResults: false })}
/>
</View>
Then, and this is the part I think is wrong, I just played with the absolute-positioned view until I moved it far enough down to line up next to the label:
labelStyle: {
fontSize: 18,
paddingLeft: 20,
flex: 1
},
acContainerStyle: {
right: 0,
top: 102,
width: '72%',
flex: 1,
position: 'absolute',
zIndex: 10
}
I would love if someone has a better solution, but this is the best I could come up with. I try to avoid moving views with hard coded values just for scaling purposes, but it seems like this is the only option.
I'm trying to get youtube videos to play in my react-native project. I am using the react-native-youtube module and have enabled YouTubeDataAPIv3 and YouTubeAnalyticsAPI. But I'm getting a blank screen. Sometimes, after a little delay, the screen will resize leaving a smaller white square in the corner and a black background. But still no video.
MY api key does work. I tested this by passing a text-based request through postman. I've also made sure the api is also correctly being passed down to the component. I've tried different videos/videoIds. I've played around with various settings and looked at other examples of working code. My current theory is that this may have something to do with nested views/containers and settings. The videos are in component that is embedded in a parent screen. Maybe a flex:1 is overriding another view? I really don't know. . Has anyone else run into this problem? Any ideas how to fix this?
parent screen:
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<LeaderBoard />
<CurrentVideos />
</View>
</SafeAreaView>
);
}
video screen:
return (
<ScrollView style={{ flex: 1}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink'
}}
>
<YouTube
videoId={'BunklIatIK4'}
play={true}
apiKey={config.API_KEY}
controls={1}
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
</View>
</ScrollView>
);
Figured it out! The issue was that I hadn't manually moved a copy of the the youtube iframe file from the node modules to the project in Xcode. Now, it's BEAUTIFUL!