Skip to content

Instantly share code, notes, and snippets.

@roryhow
Last active August 7, 2018 09:15
Show Gist options
  • Save roryhow/377f7399955d320714b1f04a2b824253 to your computer and use it in GitHub Desktop.
Save roryhow/377f7399955d320714b1f04a2b824253 to your computer and use it in GitHub Desktop.
One file taken from a demo export of Supernova Studio
import React from "react"
import { StyleSheet } from "react-native"
import { View, Image, Text } from "react-native"
import { strings } from "./../Locales/i18n"
export default class Two extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state
return {
header: null,
headerLeft: null,
headerRight: null
}
}
constructor(props) {
super(props)
}
componentDidMount() {
// Additional component initialization can go here.
// If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
}
render() {
return (
<View style={styles.copyView}>
<View pointerEvents="box-none" style={{
position: "absolute",
width: "100%",
height: "100%"
}}>
<View style={styles.weekView}>
<View pointerEvents="box-none" style={{
position: "absolute",
width: "100%",
height: "100%"
}}>
<Image style={styles.rectangle107Image} source={require("./../../Assets/images/rectangle-107-2.png")} />
<View style={styles.rectangle107View} />
<View style={styles.rectangle107TwoView} />
<Image style={styles.rectangle107TwoImage} source={require("./../../Assets/images/rectangle-107-3.png")} />
<Image style={styles.rectangle107ThreeImage} source={require("./../../Assets/images/rectangle-107-4.png")} />
<Image style={styles.rectangle107FourImage} source={require("./../../Assets/images/rectangle-107.png")} />
<Image style={styles.rectangle107FiveImage} source={require("./../../Assets/images/rectangle-107.png")} />
<Text style={styles.mText}>{strings("Two.mTextText")}</Text>
<Text style={styles.tText}>{strings("Two.tTextText")}</Text>
<Text style={styles.tCopyText}>{strings("Two.tCopyTextText")}</Text>
<Text style={styles.fText}>{strings("Two.fTextText")}</Text>
<Text style={styles.sText}>{strings("Two.sTextText")}</Text>
<Text style={styles.sCopyText}>{strings("Two.sCopyTextText")}</Text>
<Text style={styles.wText}>{strings("Two.wTextText")}</Text>
</View>
</View>
{ /* more JSX here but removed for brevity */ }
</View>
<Text>We are able to add new components here and have them hot-reload</Text>
</View>
)
}
}
// We can also iterate on our designs by changing values here
const styles = StyleSheet.create({
copyView: {
backgroundColor: "rgba(255, 255, 255, 1)",
flex: 1
},
weekView: {
backgroundColor: "rgba(0, 0, 0, 0)",
width: 249.00,
height: 221.00,
left: 63.00,
top: 394.00,
position: "absolute"
},
rectangle107Image: {
resizeMode: "center",
backgroundColor: "rgba(0, 0, 0, 0)",
width: 6.00,
height: 19.00,
left: 2.00,
top: 142.00,
position: "absolute"
},
rectangle107View: {
backgroundColor: "rgba(56, 166, 146, 1)",
borderRadius: 3.00,
width: 6.00,
height: 160.00,
left: 42.00,
top: 0.00,
position: "absolute"
},
rectangle107TwoView: {
backgroundColor: "rgba(56, 166, 146, 1)",
borderRadius: 3.00,
width: 6.00,
height: 90.00,
left: 82.00,
top: 71.00,
position: "absolute"
},
rectangle107TwoImage: {
resizeMode: "center",
backgroundColor: "rgba(0, 0, 0, 0)",
width: 6.00,
height: 19.00,
left: 122.00,
top: 142.00,
position: "absolute"
},
rectangle107ThreeImage: {
resizeMode: "center",
backgroundColor: "rgba(0, 0, 0, 0)",
width: 6.00,
height: 19.00,
left: 162.00,
top: 142.00,
position: "absolute"
},
rectangle107FourImage: {
resizeMode: "center",
backgroundColor: "rgba(0, 0, 0, 0)",
width: 6.00,
height: 19.00,
left: 202.00,
top: 142.00,
position: "absolute"
},
rectangle107FiveImage: {
resizeMode: "center",
backgroundColor: "rgba(0, 0, 0, 0)",
width: 6.00,
height: 19.00,
left: 242.00,
top: 142.00,
position: "absolute"
},
mText: {
color: "rgba(38, 38, 40, 1)",
fontFamily: "Montserrat-Regular",
fontSize: 11.00,
fontStyle: "normal",
fontWeight: "normal",
textAlign: "center",
letterSpacing: 0.00,
backgroundColor: "rgba(0, 0, 0, 0)",
width: 12.00,
height: 14.00,
left: -1.00,
top: 207.00,
position: "absolute"
}
{ /* this continues, but removed for gist brevity */ }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment