Yellow Box Errors/Warnings after React Native Upgrade - css

I recently upgraded my project from React Native 0.15 to 0.20. I guess this was kind of a leap and I'm quite new to these Yellow Box Warnings. Right now I got 2 warnings as follows.
Warning One:
Warning: React.createElement: type should not be null, undefined,
boolean, or number. It should be a string (for DOM elements) or a
ReactClass (for composite components). Check the render method of
ItemViewPage.
Warning Two:
View #2359 of type RCTView has a shadow set but cannot calculate
shadow efficiently. Consider setting a background color to fix this,
or apply the shadow to a more specific component.
Figured out that Warning One was due to using const Radio = require('react-native-simple-radio-button'); instead of import Radio from 'react-native-simple-radio-button';. Once the change was done, Warning One was gone.
For the Warning Two, the page it sends it from has place where it uses shadows.
Styling Code:
container: {
overflow: 'hidden',
width: Dimensions.get('window').width,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(255, 255, 255, 0.0)',
shadowColor: '#000000',
shadowOpacity: 1,
shadowRadius: 20,
shadowOffset: {width: 0, height: -5},
justifyContent: 'center'
}
Code:
renderItem: function (item) {
var Dimensions = require('Dimensions');
return (
<View style={styles.mainContainer}>
<TouchableHighlight underlayColor="rgba(0,0,0,0)" style={styles.buttonFill}
onPress={this.categoryPressed.bind(this, item.categoryId, item.name)}>
<View style={styles.container}>
<KenBurnsImage tension={6} friction={50} imageWidth={Dimensions.get('window').width} imageHeight={Dimensions.get('window').height / 100 * 30} sourceUri={{uri: item.image}} placeholderSource={{uri: './images/placeholder.jpg'}}/>
<View>
<LinearGradient
colors={[processColor('rgba(255, 255, 255, 0.0)'), processColor('rgba(0,0,0,0)'), processColor('rgba(0,0,0,0.7)')]}
style={styles.linearGradient}>
<View style={styles.allContent}>
<View style={styles.imageRowContainer}>
<View style={styles.nameContainer}>
<Text style={styles.textMain}>{item.name}</Text>
</View>
{this._renderItemCountSection(item.itemsCount)}
<View style={styles.continueContainer}>
<Text style={styles.textArrow}></Text>
</View>
</View>
</View>
</LinearGradient>
</View>
</View>
</TouchableHighlight>
</View>
);
}
renderItem function is rendering items from the ListView.
As the code states, it already has the Background Color. So why is this warning coming? What is the fix? Thanks in advance.

This is because you are setting the backgroundColor as transparent rgba(255, 255, 255 ,0.0). This is very inefficient. You can read all about this in this commit log
https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06

For warning two
In my case, I deleted shadowOpacity, added it to the shadow color and used RGBA value.
shadowColor: 'rgba(0,0,0, 0.1)'

Related

Double Modal in React-Native?

I'm experiencing a lot of difficulty trying to implement a "double modal", i.e. two modals at the same time.
e.g.
I'm using Overlay from the 'react-native-elements' library to achieve the modal effect, however, putting two of them together in a view isn't working as it will only display the first one. I'm also finding that directly setting the height of the overlay isn't having any effect.
I then considered creating a custom component but can't figure out how to dim the background using CSS.
If you want, change the your element modal to react-native-modal. Keep try and execute the below code. I hope it'll work for you.
import Modal from 'react-native-modal';
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
<TouchableOpacity onPress={toggleModal}>
<Text>Button Text</Text>
<Modal
isVisible={isModalVisible}
onBackdropPress={() => setModalVisible(false)}>
<View style={{ backgroundColor: 'white', padding: 20, height:250 }}>
<Text>First box content appear here</Text>
</View>
<View style={{ backgroundColor: 'white', padding: 20, height:100, marginTop: 30 }}>
<Text>Second box content appear here</Text>
</View>
</Modal>
</TouchableOpacity>

Flex Box Styling

I have a problem with styling 3 nested components.
Background:
I want the user to enter tags. On testing it became clear, that many user, didn't know that they have to press space to save the tag (a problem, when a user only wants to enter one tag).
As a solution, as soon as the user presses on the textinput I want to display a trailing hint, to press space to save (leertaste zum speichern = space to save), which is displayed after the userinput.
The problem is as seen on the gif
https://gfycat.com/harmoniousgorgeousdikkops
The textinput grows and the hint stays behind the text, as expected, but at some point my hint is leaving the container component, while my textinput behaves normally.
Expected behavior is that the hint is always visible and the textinput grows as long as this is given (thus never pushing the hint out of the screen, or changing it's design). Visually it is when I pause during the gif.
Code:
<View
style={{
flexDirection: 'row',
backgroundColor: COLOR_GREY_BACKGROUND,
borderRadius: BORDER_RADIUS,
height: TEXTINPUT_HEIGHT,
marginRight: MARGIN_TO_DISPLAY_EDGE,
width: DIMENSION_WIDTH - 2 * MARGIN_TO_DISPLAY_EDGE,
flexWrap: 'nowrap',
}}
>
<Text
style={{
fontSize: FONT_SIZE_TEXT_INPUT,
...FONT_OPENSANS_SEMI_BOLD,
paddingTop: 1,
paddingRight: 0,
marginLeft: 5,
}}
>
#
</Text>
<View style={{ flexDirection: 'row', flex: 1 }}>
<TextInput
style={[styles.textInputText]}
placeholder={placeholder}
onChangeText={(text) =>
onChangeText(text.toLowerCase())
}
value={value}
autoCapitalize="none"
autoCorrect={false}
onFocus={() => setTextInputFocus(true)}
/>
<View style={{ justifyContent: 'flex-end' }}>
<Text
style={[
styles.textInputText,
{
paddingLeft: 0,
fontSize: FONT_SIZE_SECONDARY_TEXT,
color: COLOR_GREY_TEXT_BACKGROUND,
},
]}
>
{T('spaceToSave')}
</Text>
</View>
</View>
</View>
the missing style :
textInputText: {
fontSize: FONT_SIZE_TEXT_INPUT,
...FONT_OPENSANS_SEMI_BOLD,
//paddingRight: TEXTINPUT_PADDING,
paddingTop: TEXTINPUT_PADDING,
}
(The # is added so its clearer for the user what to do without having him to enter it). Should it be unclear, what I am trying to do, please let me know.
Thanks a lot for your help!

React Native Image not being centered with View

I am trying to center an Image within a View both horizontally and vertically the problem is that no matter what I put in the code it still seems to be in the same position all the time. I have this code for another View from another screen and it's exactly how I need it to be, however for the other pages it's not responding.
Here is my code:
<View style={styles.header}>
<Icon
raised
name='chevron-left'
type='octicon'
color='#f50'
onPress={() => this.props.navigation.goBack()}
containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
<Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignItems:'center', marginTop:30, position:'absolute'}}/>
</View>
const styles = StyleSheet.create({
header:{
backgroundColor:'#ff4714',
height:SCREEN_HEIGHT/8,
flexDirection: 'row'
}
});
EDIT: I've removed all the styling for the <Image> except for width and height and the image stays at the same place. I don't know what to make of this
Here is an expo snack https://snack.expo.io/SyCO!ree8
You need to add justifyContent:'center' and alignSelf:'center' to your image style,
Just check the code :
<View style={{
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}}>
<Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50,alignSelf:'center'}} />
</View>
And this is expo snack : expo-snack
UPDATE:
HERE IS MY UPDATED EXPO SNACK:
check here
Hope it helps
Try adding:
alignItems: 'center',
justifyContent: 'center'
to your header style
You might also need to add flex:1, depending on the state of your View

React Native flex not giving height to component

I'm trying to create something like this:
The sections labeled with Dates, Time are where my the data from my dates and timeSpan will go. The red area is where my calendar would be placed.
I have been trying to fit Views to look like tables, but it has not been working out so well. Here's my code:
<ScrollView>
<View>...</View>
<View **
style={{
marginHorizontal: 10,
marginTop: 10,
flex: 1,
borderColor: Colors.separatorColor,
borderWidth: StyleSheet.hairlineWidth}}>
<View style={{
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#EDEDED'}}>
<View style={{1, backgroundColor: '#ff0000'}}/>
{
dates.map((date, i) => {
<View key={i} style={{
flex:1,
backgroundColor: '#00fff0',
borderRightColor: '#EDEDED',
borderRightWidth: StyleSheet.hairlineWidth}}>
<Text>{date}</Text>
</View>
})
}
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
</View>
{
timeSpan.map((time,i) => {
<View style={{
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#EDEDED'}}>
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
</View>
})
}
</View>
<View>...</View>
</ScrollView>
The <View>...</View> is the code for Other Stuff that will just make my question look much longer so I cut it out. I'm trying to make the <View>s look like a table which have dates.length columns and timeSpan.length rows.
The issue right now is that nothing appears on my screen when I give flex: 1 to my View that I marked in the code with **. However, if I give it a fixed height such as height: 260, then I get one big fat red box instead of seeing many Views that would make up my custom calendar.
I have put in static data to dates and timeSpan and checked by logging that the iterations are done over these arrays so I am confident that the rows and columns are being created but they are not shown on the screen.
How would I resolve this issue which I believe is caused by the flex values?
EDIT:
here's a snack example of my app:
<div data-snack-id="#ohnu93/tenacious-marshmallows" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

Align text to image - React Native

I am trying to align the social icon texts under each image like so:
However, I am getting these results:
I placed each row as a separate view
<View style={styles.socialIcons}>
<Image source={require("social/facebook-icon.png")} />
<Image source={require("social/twitter-icon.png")} />
<Image source={require("social/mail-icon.png")} />
<Image source={require("social/message-icon.png")} />
</View>
<View style={styles.socialIconsText}>
<Text style={styles.socialIconText}>Facebook</Text>
<Text style={styles.socialIconText}>Twitter</Text>
<Text style={styles.socialIconText}>Email</Text>
<Text style={styles.socialIconText}>Message</Text>
</View>
followed by their styles:
socialIcons: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 40,
paddingRight: 40,
},
socialIconsText: {
backgroundColor: 'transparent',
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 40,
paddingRight: 40,
},
I think what I should be doing instead is to place the text inside the image tags but, when I do that the images height cuts off any text under it. Is there a way to get the image heights and increase the height in the styles?
Or is there a better way to align the text underneath the images?
i think the padding interferes with the text.
also try to make every image and text element 25% in width + box-sizing: border-box; and center text.
İnstead of seperating image and text of facebook, twitter ... Covering them in a special wiew is better idea. In this way you will have much more control on your views and you can make a dynamic implementation.
<View style = {{flex:1}}>
<View style={{height:80, width:80}}>
<Image style ={{flex:1}}>
...
</Image>
<Text style={{flex:1}}>
</Text>
</View>
.
.
.
</View>
Creating a function for returning special views will save you from repeating codes.
getSpecView(uri,text)//use this params to specify your images and texts
{
return(
...
);
}
And now you just have to do is calling this function
<View style = {{flex:1}}>
getSpecView(*faceuri, *facetext)
getSpecView(*twitter, *twittertext)
.
.
</View>
You can even get rid of calling this function several times for every couple by creating an Json array and calling map function
couples = [{ name:'facebook', uri:'faceuri' }, { name:'twitter', uri:'twitter uri'}]
and now you just have a three lines of codes + a function and a json array.
<View style = {{flex:1}}>
couples.map(this.getSpecView(name,uri))// not sure about syntax
</View>
If you have trouble with images you can use resizeModes
resizeMode PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
https://facebook.github.io/react-native/docs/image.html

Resources