Setting initial offset value is not working - react-native

Question

I'm using react-native-simple-modal for displaying models in android devices. Here the model always opens at the center of the screen. Setting the initial offset value in constructor has no effect. However moveUp function is working well. How to show the model at the top of the screen initially? Moreover I need to put the model just below a component.
CODE:
constructor(props) {
super(props);
this.state = {
open: false,
offset: -200,
};
}
moveUp = () => this.setState({offset: -200})
openModal = () => this.setState({open: true})
closeModal = () => this.setState({open: false})
render() {
return (
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
<TouchableOpacity onPress={this.openModal}>
<Text>Open modal</Text>
</TouchableOpacity>
<Modal
offset={this.state.offset}
open={this.state.open}
modalDidOpen={this.modalDidOpen}
modalDidClose={this.modalDidClose}>
<View style={{alignItems: 'center'}}>
<Text style={{fontSize: 20, marginBottom: 10}}>Hello world!</Text>
<TouchableOpacity
onPress={this.moveUp}>
<Text>Move modal up</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.resetPosition}>
<Text>Reset modal position</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.closeModal}>
<Text>Close modal</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
)
};

Answer 1

Currently there is no option to align your modal according to your offset in a initial stage. I just went through the internal code of react-native-simple-modal and found out that on the first time this doesn't understand the offset sent through the props. If you want this to be implemented then you can ask the author of this module to update the following code or you can just merge a PR on this module.
Inside the main index.js file of react-native-simple-modal you can see that the default state offset is being set as 0 instead of understanding it through the offset sent from props. So change the below line as:-
state = {
opacity: new Animated.Value(0),
scale: new Animated.Value(0.8),
offset: new Animated.Value(0)
};
to the code below:-
state = {
opacity: new Animated.Value(0),
scale: new Animated.Value(0.8),
offset: new Animated.Value(this.props.offset) ===>> update this initial value.
};
This offset works fine after the initial phase because the author of the module has understood the props offset in the componentWillReceiveProps lifecycle hook of the component. So just ask the author to update this or you can just raise the PR for this. I have checked this by updating the value in node_modules and if you just want to check if its working according to your requirement then you can also update it once and check that out.
I hope this will help you and still if you have any problem then let me know.