Skip to content
This repository has been archived by the owner on Feb 15, 2019. It is now read-only.

Add style for scene in route config #418

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

pawlowskim
Copy link

Hello. I was struggling for few hours how to display modal using ex-navigation. When I get necessary knowledge I found that new scene always have a default white background and I cannot fix it. I start digging issues without any success. According to #394 this PR should resolve that problem.

To configure route scene we need to override style from ExNavigationStackItem. So far, it was not passed down from anywhere. In our component we just need to define route as follows:

static route = {
		styles: {
			sceneAnimations:() => {},
			style: {
				backgroundColor: 'transparent',
				bottom: 0,
				left: 0,
				position: 'absolute',
				right: 0,
				shadowColor: null,
				shadowOffset: null,
				shadowOpacity: null,
				shadowRadius: null,
				top: 0,
			}
		}
	};

And we can easily use react-native Modal component as follows:

render() {
		return <Modal
			animationType={"slide"}
			visible={true}
			transparent={true}>
			<View style={{flex:1, backgroundColor:'red'}}>
				<Text>Modal View</Text>
				<TouchableOpacity onPress={() => this.props.navigator.pop()}>
					<Text>Klik</Text>
				</TouchableOpacity>
			</View>
		</Modal>
	}

Sorry for PR code formatting. If place where I receive and pass data style is wrong, I will appreciate if any contributor could fix it. Also, hope I made everything ok with PR - it's my first one :)

@@ -692,6 +692,7 @@ class ExNavigationStack extends PureComponent<any, Props, State> {
route: routeForScene,
sceneAnimations,
gestures,
style,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the tabs / spaces are out of whack here.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants