So I want to use a Modal to disable all interactions on a screen but I still want everything on the screen to be visible. It's odd because it was working just fine for me earlier, then I tried to make the Modal its own component, but as soon as I did that, it stopped working properly. I then went back to what I originally did but still having the same issue. I should've committed it when it worked.
Any idea where I went wrong?
Here's my code:
import React, { Component } from 'react';
import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';
constructor(props) {
super(props);
this.state = {
modalVisible: true,
};
}
openModal() {
this.setState({modalVisible: true});
}
closeModal() {
this.setState({modalVisible: false});
}
render() {
return (
<View style={styles.container}>
<Modal
visible={this.state.modalVisible}
onRequestClose={() => this.closeModal()}
>
<TouchableHighlight
style={styles.modalContainer}
onPress={() => this.closeModal()}
>
<Text>"Words n stuff"</Text>
</TouchableHighlight>
</Modal>
<View
style={styles.upperContainer}
/>
<View
style={styles.lowerContainer}
/>
</View>
);
}
}
}
Styles:
modalContainer: {
flexGrow: 1,
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'transparent',
},
container: {
flexGrow: 1,
justifyContent: 'space-around',
flexDirection: 'column',
alignItems: 'center',
},
upperContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 18,
width: screenWidth,
marginTop: -140,
},
lowerContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'space-around',
width: screenWidth,
},
Try to add transparentproperty to your Modal.
Example:
<Modal
transparent
...>
...
</Modal>
Doc: https://facebook.github.io/react-native/docs/modal.html#transparent
Try transparent={true} on <Modal />
Related
I'm trying to set container with two columns with different heights.
I have my container which has flex-direction: 'row' and flexWrap: 'wrap'.
Now I want to display there elements (only two can fit into container width) with different heights. I know that this can't be done with just flexbox, because rows has to be the same height when wrapping. So my question is: can this be done in React Native when Flexbox is default display type?
Code:
Container:
import React from 'react';
import {StyleSheet, View} from 'react-native';
import Reminder from './../components/reminders/Reminder';
const reminders = require('../../public/reminders.json');
const RemindersPage = () => {
return (
<View style={styles.reminders}>
{reminders.map((reminder) => {
return <Reminder key={reminder.id} reminder={reminder} />;
})}
</View>
);
};
const styles = StyleSheet.create({
reminders: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
});
export default RemindersPage;
Element:
import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
const Reminder = ({reminder}) => {
let source = require('./../../../public/forest.jpg');
return (
<View style={styles.reminder}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={source} />
</View>
<View style={styles.reminders}>
{reminder.alerts.map((alert) => {
return (
<View style={styles.alert} key={alert.time}>
<Text style={styles.time}>{alert.time}</Text>
</View>
);
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
reminder: {
minWidth: '48%',
height: 'auto',
backgroundColor: '#333',
color: 'white',
padding: 5,
marginVertical: 4,
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'white',
alignSelf: 'flex-start',
},
imageContainer: {
alignItems: 'center',
borderStyle: 'solid',
borderBottomWidth: 1,
borderColor: 'white',
paddingBottom: 8,
},
image: {
width: '100%',
height: 150,
resizeMode: 'cover',
},
alerts: {
flexDirection: 'column',
marginTop: 5,
},
alert: {
flexDirection: 'row',
},
time: {
fontWeight: 'bold',
color: 'white',
textShadowColor: 'black',
textShadowOffset: {width: 0, height: 0},
textShadowRadius: 5,
},
});
export default Reminder;
My goal is that the element with red frame goes up as the arrow is pointing.
It should looks like this:
I don't want to set flex-direction to 'column' beacause I want this page to be scrollable.
I have a JS class
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Avatar, Accessory } from 'react-native-elements';
import PropTypes from 'prop-types';
import MenuButton from './MenuButton';
import AppStyles from '../AppStyles';
import Api from '../Api';
export default class DrawerContainer extends React.Component {
render() {
const { navigation, onLogout } = this.props;
return (
<View style={styles.content}>
<Avatar size={100}
rounded
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
}}
/>
<View style={styles.container}>
<MenuButton
title="Home"
source={AppStyles.iconSet.home}
onPress={() => {
navigation.navigate('Home');
}}
/>
<MenuButton
title="Logout"
source={AppStyles.iconSet.logout}
onPress={() => {
onLogout();
Api.logout();
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 75
},
container: {
flex: 1,
alignItems: 'center',
paddingHorizontal: 20,
alignItems: 'flex-end'
},
});
DrawerContainer.propTypes = {
navigation: PropTypes.object,
onLogout: PropTypes.func,
};
Here is the output generated from the same.
What I want to achieve is to have a gap between the image and the icons displayed. I tried using padding but the text overflows with the same. Can anyone suggest as to what wrong am I doing here?
container: {
flex: 1,
alignItems: 'center',
paddingHorizontal: 20,
alignItems: 'flex-end'
margin-top: 10%;
},
Try to reate a margin-top for .container
In my React-Native app I have an icon and SearchBar in my header (from react navigation).
The following code:
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle:
<View style={{ flex: 1, flexDirection: "row", paddingHorizontal: 15, alignItems: "center" }}>
<StatusBar default style={{ flex: 1, height: getStatusBarHeight() }} />
<Icon name="chevron-left" size={28} />
<SearchBar round platform={"default"} placeholder="Search" containerStyle={{
flex: 1, backgroundColor: "transparent"
}} />
</View>,
headerStyle: {
backgroundColor: '#e54b4d',
}
};
}
outputs this:
So far so good. However, I want to have padding below the SearchBar. In other words, I want to have the distance from the top of the screen to the SearchBar as a padding below the SearchBar. (I can obtain the distance value using getStatusBarHeight() from rn-status-bar-height)
However, if I put paddingBottom: getStatusBarHeight() to the headerStyle, I get this result:
Basically, now I have the padding that I wanted, however, the StatusBar overlaps with the SearchBar.
How can I put paddingBottom without making the StatusBar and SearchBar overlap?
To change the padding of the header in your case you'll need to change headerTitleContainerStyle and not headerTitle.
For example :
headerTitleContainerStyle: { paddingVertical: 10 }
You can still check the doc.
For ios you will need to set backgroundColor.Below code is fit for android ios both.Hope it helps you.
import React, { Component } from 'react';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import {
Modal,
Button,
View,
Text,
StyleSheet,
StatusBar,
Image,
Platform,
} from 'react-native';
import { SearchBar, Icon } from 'react-native-elements';
export default class AssetExample extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle: (
<View
style={{
flex: 1,
backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
height: StatusBar.currentHeight,
}}>
<Icon name="chevron-left" size={28} />
<SearchBar
round
platform={'default'}
placeholder="Search"
containerStyle={{
flex: 1,
backgroundColor: 'transparent',
}}
/>
</View>
),
headerStyle: {
backgroundColor: '#e54b4d',
},
};
};
render() {
return (
<View style={styles.container}>
<Text>Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});
when i checked your code on my device its properly viewing with padding.
I have the following APP. I'm having trouble with the spacing of components within the return of the App class.
I would like to move the 'Reset' up a little bit and the 'Start' down a little. It would be nice if there was an easy way to control the vertical placement
import React from 'react';
import { Button,StyleSheet, Text, View } from 'react-native';
export class Timers extends React.Component{
constructor(props){
super(props)
this.state={work:{min:this.props.min,
sec:this.props.sec,
buttton:this.props.button,
period:this.props.period,},
play:{min:this.props.min,
sec:this.props.sec,
buttton:this.props.button,
start:this.props.start,
period:this.props.period,}
}
}
render(){
return(
<View style={styles.timer}>
<Text>{this.props.name}</Text>
<Text>{'min: ' + this.props.min + ' sec: ' + this.props.sec }</Text>
<Text>{this.props.period}</Text>
</View>
)
}
}
export default class App extends React.Component {
constructor(){
super()
this.state={start:'Start'}
}
parentState(){
if(this.state.start === 'Start') startStop = 'Stop'
else startStop = 'Start'
this.setState({start:startStop})
}
buttonPress(x){
if(x === 'Start' || x === 'Stop')this.parentState()
console.log(x)
}
render() {
return (
<View style={styles.container}>
<Button style={styles.top} title='Reset'onPress=
{()=>this.buttonPress(this.state.start)}/>
<View style={styles.row}>
<Timers
name={'WORK'}
min={'25'}
sec={'00'}
button={'Reset'}
period={'tbd'} >
</Timers>
<Timers
name={'PLAY'}
min={'25'}
sec={'00'}
period={'tbd'} >
</Timers>
</View>
<Button title={this.state.start} onPress=
{()=>this.buttonPress(this.state.start)}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
timer:{
flex:1,
flexDirection:'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
row:{
flex:0,
flexDirection:'row',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
apply marginTop and MarginBottom to styles.row does the trick
I am having a problem rendering my component inside of a navigatorIOS, I am sure it is a style issue but I can't pinpoint where.
I have given flex : 1
removed backgroundColor
and I have given a margin
as suggested in other stack overflow questions.
If I throw MessageBoardTopics outside of the navigator it renders fine.
import MessageBoardTopics from './messageBoardTopics.js';
class MessageBoards extends React.Component{
constructor(props){
super(props);
}
componentDidMount(){
}
render() {
return (
<View style={styles.container}>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
component: MessageBoardTopics,
title: 'Forum',
}}/>
</View>
);
}
};
module.exports = MessageBoards;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
var screenWidth = Dimensions.get('window').width;
class MessageBoardTopics extends React.Component{
constructor(props){
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var data = PostStore.getState().posts;
this.state={sortText: 'Sort by: Old',
dataSource: ds.cloneWithRows(data)};
}
componentDidMount() {
PostStore.listen(this.onChange);
}
componentWillUnmount() {
PostStore.unlisten(this.onChange);
}
onChange(state) {
this.setState(state);
}
replyToMessage(){
}
removeMessage(){
}
sortMessages(){
}
editMessage(){
}
pressRow(rowData){
this.props.navigator.push({
title: rowData.title,
component: Topic
});
}
render() {
return (
<View style={styles.container}>
<Text>fasfasdfafasdf</Text>
<View style={{flex: .2}}></View>
<View style={styles.buttonBar}>
<TouchableHighlight style={styles.centerButton} underlayColor={"lightred"} onPress={this.sortMessages}>
<Text>{this.state.sortText}</Text>
</TouchableHighlight>
<View style={styles.centerButton} underlayColor={"lightred"} onPress={this.newMessage}>
<ComposeModal reply={this.replyToMessage} index={null}/>
</View>
</View>
<ListView
dataSource={this.state.dataSource}
style={{borderTopWidth: 2}}
renderRow={(rowData) =>
<TouchableHighlight underlayColor="lightgrey" onPress={()=>this.pressRow(rowData)}>
<View style={styles.message}>
<Text style={styles.messageTitle}>{rowData.title}</Text>
<Text style={styles.messageAuthor}>By: <Text style={{color: 'blue', fontStyle: 'italic'}}>{rowData.author}</Text></Text>
</View>
</TouchableHighlight>}/>
</View>
);
}
};
module.exports = MessageBoardTopics;
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 80,
},
message: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
borderWidth: 1,
borderColor: "lightblue",
padding: 15,
},
messageTitle: {
color: 'grey',
textDecorationLine: 'underline',
fontWeight: 'bold',
},
messageAuthor: {
fontSize: 10,
},
buttonBar: {
flex: .1,
alignSelf: 'stretch',
alignItems: 'center',
flexDirection: 'row',
},
centerButton: {
flex: 1,
width: (screenWidth/2),
alignItems: 'center',
},
button: {
flex: 1,
textAlign: 'center',
},
});
I needed to set a width to a wrapper component for the navigatorIOS
Edit: When I upgraded from react-native 0.16 to 0.17 flex:1 was not working on the navigatorIOS. I had to create a wrapper component and give that a flex as well.
This did not work. This was in my index.ios.js file, which rendered the navigatorIOS on 0.16.
render() {
return (
<View style={styles.container}>
<NavigatorIOS
style={{flex: 1, alignSelf: 'stretch'}}
initialRoute={{
component: MessageBoardTopics,
title: 'Forum',
}}/>
</View>
);
}
};
on react-native 0.17 I had to create a wrapper component and give that a flex attribute. I had to change my index.ios.js to render this instead.
var forumComponent = React.createClass({
render: function() {
return (
<View style={styles.container}>
<MessageBoards style={{flex: 1}}/>
</View>
);
}
});