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

Add style for scene in route config#418

Open
pawlowskim wants to merge 1 commit intoexpo:masterfrom
pawlowskim:master
Open

Add style for scene in route config#418
pawlowskim wants to merge 1 commit intoexpo:masterfrom
pawlowskim:master

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 :)

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