Skip to content

Commit

Permalink
feat: Create View Screen
Browse files Browse the repository at this point in the history
mrousavy committed Jan 23, 2025
1 parent fb40b86 commit e84a89e
Showing 2 changed files with 151 additions and 0 deletions.
15 changes: 15 additions & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { useColors } from './useColors'
import { Image } from 'react-native'
import { BenchmarksScreen } from './screens/BenchmarksScreen'
import { ViewScreen } from './screens/ViewScreen'

const dna = require('./img/dna.png')
const rocket = require('./img/rocket.png')
@@ -51,6 +52,20 @@ export default function App() {
),
}}
/>
<Tabs.Screen
name="View"
component={ViewScreen}
options={{
tabBarLabel: 'View',
tabBarIcon: ({ size, focused }) => (
<Image
source={rocket}
tintColor={focused ? undefined : 'grey'}
style={{ width: size * 1.4, height: size * 1.4 }}
/>
),
}}
/>
</Tabs.Navigator>
</NavigationContainer>
)
136 changes: 136 additions & 0 deletions example/src/screens/ViewScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import * as React from 'react'

import { StyleSheet, View, Text, Button, Platform } from 'react-native'
import { NitroModules } from 'react-native-nitro-modules'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useColors } from '../useColors'

export function ViewScreen() {
const safeArea = useSafeAreaInsets()
const colors = useColors()

return (
<View style={[styles.container, { paddingTop: safeArea.top }]}>
<Text style={styles.header}>View</Text>
<View style={styles.topControls}>
<View style={styles.flex} />
<Text style={styles.buildTypeText}>{NitroModules.buildType}</Text>
</View>

<View style={styles.resultContainer}>
<Text>Hello!</Text>
</View>

<View style={[styles.bottomView, { backgroundColor: colors.background }]}>
<Text>Re-render</Text>
<View style={styles.flex} />
<Button title="Run" onPress={console.log} />
</View>
</View>
)
}

const styles = StyleSheet.create({
header: {
fontSize: 26,
fontWeight: 'bold',
paddingBottom: 15,
marginHorizontal: 15,
},
container: {
flex: 1,
},
scrollContent: {},
topControls: {
marginHorizontal: 15,
marginBottom: 10,
flexDirection: 'row',
alignItems: 'center',
},
buildTypeText: {
fontFamily: Platform.select({
ios: 'Menlo',
macos: 'Menlo',
android: 'monospace',
}),
fontWeight: 'bold',
},
segmentedControl: {
minWidth: 180,
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
testCase: {
width: '100%',
paddingHorizontal: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
paddingVertical: 10,
flexDirection: 'row',
alignItems: 'center',
},
testBox: {
flexShrink: 1,
flexDirection: 'column',
},
testName: {
fontSize: 16,
fontWeight: 'bold',
},
testStatus: {
fontSize: 14,
flex: 1,
},
smallVSpacer: {
height: 5,
},
largeVSpacer: {
height: 25,
},
resultContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingBottom: 45,
},
chartsContainer: {
alignItems: 'stretch',
width: '70%',
},
nitroResults: {},
turboResults: {},
title: {
fontWeight: 'bold',
fontSize: 25,
},
chart: {
height: 20,
borderRadius: 5,
},
text: {
fontSize: 16,
},
bold: {
fontWeight: 'bold',
},
flex: { flex: 1 },
bottomView: {
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
elevation: 15,
shadowColor: 'black',
shadowOffset: {
width: 0,
height: 5,
},
shadowRadius: 7,
shadowOpacity: 0.4,

paddingHorizontal: 15,
paddingVertical: 9,
alignItems: 'center',
flexDirection: 'row',
},
})

0 comments on commit e84a89e

Please sign in to comment.