Skip to content

Commit c448341

Browse files
rahsheenrahsheen
committed
update styles
1 parent ecb397a commit c448341

File tree

10 files changed

+352
-141
lines changed

10 files changed

+352
-141
lines changed

‎template/App.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ import {
2525
DebugInstructions,
2626
ReloadInstructions,
2727
} from 'react-native/Libraries/NewAppScreen';
28-
import { Counter } from './features/counter/Counter'
28+
import LearnReduxLinks from './src/components/LearnReduxLinks';
29+
import {Counter} from './src/features/counter/Counter';
2930

3031
declare const global: {HermesInternal: null | {}};
3132

@@ -37,7 +38,6 @@ const App = () => {
3738
<ScrollView
3839
contentInsetAdjustmentBehavior="automatic"
3940
style={styles.scrollView}>
40-
<Header />
4141
{global.HermesInternal == null ? null : (
4242
<View style={styles.engine}>
4343
<Text style={styles.footer}>Engine: Hermes</Text>
@@ -48,8 +48,8 @@ const App = () => {
4848
<View style={styles.sectionContainer}>
4949
<Text style={styles.sectionTitle}>Step One</Text>
5050
<Text style={styles.sectionDescription}>
51-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
52-
screen and then come back to see your edits.
51+
Edit <Text style={styles.highlight}>App.tsx</Text> to change
52+
this screen and then come back to see your edits.
5353
</Text>
5454
</View>
5555
<View style={styles.sectionContainer}>
@@ -65,7 +65,14 @@ const App = () => {
6565
</Text>
6666
</View>
6767
<View style={styles.sectionContainer}>
68-
<Text style={styles.sectionTitle}>Learn More</Text>
68+
<Text style={styles.sectionTitle}>Learn More Redux</Text>
69+
<Text style={styles.sectionDescription}>
70+
Discover what to do next with Redux:
71+
</Text>
72+
</View>
73+
<LearnReduxLinks />
74+
<View style={styles.sectionContainer}>
75+
<Text style={styles.sectionTitle}>Learn More React Native</Text>
6976
<Text style={styles.sectionDescription}>
7077
Read the docs to discover what to do next:
7178
</Text>

‎template/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
* @format
33
*/
44

5-
import { AppRegistry } from 'react-native';
5+
import {AppRegistry} from 'react-native';
66
import App from './App';
7-
import { name as appName } from './app.json';
8-
import { store } from './app/store';
9-
import { Provider } from 'react-redux';
7+
import {name as appName} from './app.json';
8+
import {store} from './src/app/store';
9+
import {Provider} from 'react-redux';
10+
import React from 'react';
1011

1112
AppRegistry.registerComponent(appName, () => () => (
1213
<Provider store={store}>

‎template/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "HelloWorld",
2+
"name": "TestApp",
33
"version": "0.0.1",
44
"private": true,
55
"scripts": {
@@ -21,6 +21,7 @@
2121
"@react-native-community/eslint-config": "^1.1.0",
2222
"@types/jest": "^25.2.3",
2323
"@types/react-native": "^0.63.2",
24+
"@types/react-redux": "^7.1.16",
2425
"@types/react-test-renderer": "^16.9.2",
2526
"babel-jest": "^25.1.0",
2627
"eslint": "^6.5.1",

‎template/src/app/hooks.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
2-
import { RootState, AppDispatch } from './store';
1+
import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
2+
import {RootState, AppDispatch} from './store';
33

44
// Use throughout your app instead of plain `useDispatch` and `useSelector`
55
export const useAppDispatch = () => useDispatch<AppDispatch>();

‎template/src/app/store.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
2-
import counterReducer from '../features/counter/counterSlice';
3-
4-
export const store = configureStore({
5-
reducer: {
6-
counter: counterReducer,
7-
},
8-
});
9-
10-
export type RootState = ReturnType<typeof store.getState>;
11-
export type AppDispatch = typeof store.dispatch;
12-
export type AppThunk<ReturnType = void> = ThunkAction<
13-
ReturnType,
14-
RootState,
15-
unknown,
16-
Action<string>
17-
>;
1+
import {configureStore, ThunkAction, Action} from '@reduxjs/toolkit';
2+
import counterReducer from '../features/counter/counterSlice';
3+
4+
export const store = configureStore({
5+
reducer: {
6+
counter: counterReducer,
7+
},
8+
});
9+
10+
export type RootState = ReturnType<typeof store.getState>;
11+
export type AppDispatch = typeof store.dispatch;
12+
export type AppThunk<ReturnType = void> = ThunkAction<
13+
ReturnType,
14+
RootState,
15+
unknown,
16+
Action<string>
17+
>;

‎template/src/components/Header.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @format
9+
*/
10+
11+
'use strict';
12+
13+
import React from 'react';
14+
import {Text, StyleSheet, ImageBackground} from 'react-native';
15+
import {Colors} from 'react-native/Libraries/NewAppScreen';
16+
17+
const Header = () => (
18+
<>
19+
<ImageBackground
20+
accessibilityRole={'image'}
21+
source={require('./logo.gif')}
22+
style={styles.background}
23+
imageStyle={styles.logo}>
24+
<Text style={styles.text}>Welcome to React + Redux</Text>
25+
</ImageBackground>
26+
</>
27+
);
28+
29+
const styles = StyleSheet.create({
30+
background: {
31+
paddingBottom: 40,
32+
paddingTop: 96,
33+
paddingHorizontal: 32,
34+
backgroundColor: Colors.lighter,
35+
},
36+
logo: {
37+
opacity: 0.2,
38+
overflow: 'visible',
39+
resizeMode: 'cover',
40+
/*
41+
* These negative margins allow the image to be offset similarly across screen sizes and component sizes.
42+
*
43+
* The source logo.png image is 512x512px, so as such, these margins attempt to be relative to the
44+
* source image's size.
45+
*/
46+
marginLeft: -64,
47+
marginBottom: -128,
48+
},
49+
text: {
50+
fontSize: 40,
51+
fontWeight: '600',
52+
textAlign: 'center',
53+
color: Colors.black,
54+
},
55+
});
56+
57+
export default Header;

‎template/src/components/LearnReduxLinks.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @format
9+
*/
10+
11+
'use strict';
12+
13+
import React from 'react';
14+
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
15+
// @ts-ignore
16+
import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
17+
import {Colors} from 'react-native/Libraries/NewAppScreen';
18+
19+
const links = [
20+
{
21+
title: 'React',
22+
link: 'https://reactjs.org/',
23+
description: 'JavaScript library for building user interfaces',
24+
},
25+
{
26+
title: 'Redux',
27+
link: 'https://redux.js.org/',
28+
description: 'A Predictable State Container for JS Apps',
29+
},
30+
{
31+
title: 'Redux Toolkit',
32+
link: 'https://redux-toolkit.js.org/',
33+
description:
34+
'The official, opinionated, batteries-included toolset for efficient Redux development',
35+
},
36+
{
37+
title: 'React Redux',
38+
link: 'https://react-redux.js.org',
39+
description: 'Official React bindings for Redux',
40+
},
41+
];
42+
43+
const LinkList = () => (
44+
<View style={styles.container}>
45+
{links.map((item, index) => {
46+
return (
47+
<React.Fragment key={index}>
48+
<View style={styles.separator} />
49+
<TouchableOpacity
50+
accessibilityRole={'button'}
51+
onPress={() => openURLInBrowser(item.link)}
52+
style={styles.linkContainer}>
53+
<Text style={styles.link}>{item.title}</Text>
54+
<Text style={styles.description}>{item.description}</Text>
55+
</TouchableOpacity>
56+
</React.Fragment>
57+
);
58+
})}
59+
</View>
60+
);
61+
62+
const styles = StyleSheet.create({
63+
container: {
64+
marginTop: 32,
65+
paddingHorizontal: 24,
66+
},
67+
linkContainer: {
68+
flexWrap: 'wrap',
69+
flexDirection: 'row',
70+
justifyContent: 'space-between',
71+
alignItems: 'center',
72+
paddingVertical: 8,
73+
},
74+
link: {
75+
flex: 2,
76+
fontSize: 18,
77+
fontWeight: '400',
78+
color: Colors.primary,
79+
},
80+
description: {
81+
flex: 3,
82+
paddingVertical: 16,
83+
fontWeight: '400',
84+
fontSize: 18,
85+
color: Colors.dark,
86+
},
87+
separator: {
88+
backgroundColor: Colors.light,
89+
height: 1,
90+
},
91+
});
92+
93+
export default LinkList;

‎template/src/components/logo.gif‎

5.82 KB
Loading

0 commit comments

Comments
 (0)