Skip to content

Instantly share code, notes, and snippets.

@patcito
Created June 11, 2017 10:43
Show Gist options
  • Save patcito/42033ed6ce436aca2466c2fb59f83d3a to your computer and use it in GitHub Desktop.
Save patcito/42033ed6ce436aca2466c2fb59f83d3a to your computer and use it in GitHub Desktop.
import React from "react";
import { Constants } from "expo";
import {
TextInput,
ScrollView,
View,
Text,
StyleSheet,
StatusBar,
Button,
Animated
} from "react-native";
import GrowingTextInput from "../components/GrowingTextInput";
import Modal from "react-native-root-modal";
export default class FeedbackScreen extends React.Component {
static navigationOptions = {
title: "Feedback"
};
state = {
modalVisible: false,
modalOpacity: new Animated.Value(0)
};
render() {
const { modalVisible, modalOpacity } = this.state;
return (
<View style={{ flex: 1 }}>
<Modal
style={{
...StyleSheet.absoluteFillObject,
backgroundColor: "transparent",
justifyContent: "center",
alignItems: "center"
}}
visible={modalVisible}
>
<Animated.View
style={{
opacity: modalOpacity,
backgroundColor: "rgba(0,0,0,0.5)",
...StyleSheet.absoluteFillObject
}}
/>
<Animated.View
style={{
opacity: modalOpacity,
width: 300,
height: 300,
backgroundColor: "white",
borderRadius: 15,
padding: 30,
justifyContent: "center",
alignItems: "center"
}}
>
<Text style={{ marginBottom: 15 }}>
Do you want to autofill your contact info from Facebook?
</Text>
<Button
title={"Login to Facebook"}
onPress={() => this.setState({ modalVisible: false })}
/>
<Text style={{ marginTop: 15 }}>No thanks!</Text>
</Animated.View>
</Modal>
<ScrollView
keyboardDismissMode="on-drag"
contentContainerStyle={{ paddingTop: 30 }}
style={{ flex: 1, backgroundColor: "#F8F8F9" }}
>
<Button
title={"Autofill contact info"}
onPress={() => {
const { modalOpacity } = this.state;
Animated.spring(modalOpacity, { toValue: 1 }).start();
this.setState({ modalVisible: true });
}}
/>
<View style={[styles.row, styles.firstRow]}>
<TextInput
placeholder="Full name"
autoCapitalize="words"
autoCorrect={false}
returnKeyType="next"
style={styles.textInput}
onSubmitEditing={() => {
this._emailInput.focus();
}}
blurOnSubmit={false}
/>
</View>
<View style={styles.row}>
<TextInput
ref={view => {
this._emailInput = view;
}}
onSubmitEditing={() => {
this._phoneNumber.focus();
}}
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
placeholder="Email"
style={styles.textInput}
blurOnSubmit={false}
/>
</View>
<View style={styles.row}>
<TextInput
ref={view => {
this._phoneNumber = view;
}}
placeholder="Phone Number"
keyboardType="phone-pad"
style={styles.textInput}
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => {
this._feedbackInput.focus();
}}
/>
</View>
<View style={styles.row}>
<GrowingTextInput
minHeight={80}
ref={view => {
this._feedbackInput = view;
}}
style={styles.growingTextInput}
placeholder="Please write at least two or three sentences to share your feedback with us."
blurOnSubmit={false}
/>
</View>
</ScrollView>
<StatusBar barStyle="light-content" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {},
titleText: {
fontSize: 18,
color: "#fff",
fontWeight: "600"
},
row: {
backgroundColor: "#fff",
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: "#ccc"
},
firstRow: {
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: "#ccc"
},
textInput: {
flex: 1,
height: 45,
paddingHorizontal: 15
},
growingTextInput: {
paddingHorizontal: 15,
paddingVertical: 15,
fontSize: 15
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment