Skip to content

Commit b77b703

Browse files
aryaemami59aryaemami59
committed
Copy the RN example from the RN template
1 parent 8f2508f commit b77b703

32 files changed

+1349
-1157
lines changed

‎examples/publish-ci/react-native/.prettierrc.json

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
{
2-
"arrowParens": "avoid",
3-
"bracketSameLine": true,
4-
"singleQuote": true,
5-
"trailingComma": "all"
2+
"semi": false,
3+
"arrowParens": "avoid"
64
}

‎examples/publish-ci/react-native/App.test.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { screen, waitFor } from "@testing-library/react-native"
2+
import { App } from "./App"
3+
import { renderWithProviders } from "./src/utils/test-utils"
4+
5+
test("App should have correct initial render", () => {
6+
renderWithProviders(<App />)
7+
8+
// The app should be rendered correctly
9+
expect(screen.getByText(/learn more redux/i)).toBeOnTheScreen()
10+
11+
// Initial state: count should be 0, incrementValue should be 2
12+
expect(screen.getByLabelText("Count")).toHaveTextContent("0")
13+
expect(screen.getByLabelText("Set increment amount")).toHaveDisplayValue("2")
14+
})
15+
16+
test("Increment value and Decrement value should work as expected", async () => {
17+
const { user } = renderWithProviders(<App />)
18+
19+
// Click on "+" => Count should be 1
20+
await user.press(screen.getByLabelText("Increment value"))
21+
expect(screen.getByLabelText("Count")).toHaveTextContent("1")
22+
23+
// Click on "-" => Count should be 0
24+
await user.press(screen.getByLabelText("Decrement value"))
25+
expect(screen.getByLabelText("Count")).toHaveTextContent("0")
26+
})
27+
28+
test("Add Amount should work as expected", async () => {
29+
const { user } = renderWithProviders(<App />)
30+
31+
// "Add Amount" button is clicked => Count should be 2
32+
await user.press(screen.getByText("Add Amount"))
33+
expect(screen.getByLabelText("Count")).toHaveTextContent("2")
34+
35+
const incrementValueInput = screen.getByLabelText("Set increment amount")
36+
// incrementValue is 2, click on "Add Amount" => Count should be 4
37+
await user.clear(incrementValueInput)
38+
await user.type(incrementValueInput, "2")
39+
await user.press(screen.getByText("Add Amount"))
40+
expect(screen.getByLabelText("Count")).toHaveTextContent("4")
41+
42+
// [Negative number] incrementValue is -1, click on "Add Amount" => Count should be 3
43+
await user.clear(incrementValueInput)
44+
await user.type(incrementValueInput, "-1")
45+
await user.press(screen.getByText("Add Amount"))
46+
expect(screen.getByLabelText("Count")).toHaveTextContent("3")
47+
})
48+
49+
it("Add Async should work as expected", async () => {
50+
const { user } = renderWithProviders(<App />)
51+
52+
// "Add Async" button is clicked => Count should be 2
53+
await user.press(screen.getByText("Add Async"))
54+
55+
await waitFor(() => {
56+
expect(screen.getByLabelText("Count")).toHaveTextContent("2")
57+
})
58+
59+
const incrementValueInput = screen.getByLabelText("Set increment amount")
60+
// incrementValue is 2, click on "Add Async" => Count should be 4
61+
await user.clear(incrementValueInput)
62+
await user.type(incrementValueInput, "2")
63+
64+
await user.press(screen.getByText("Add Async"))
65+
await waitFor(() => {
66+
expect(screen.getByLabelText("Count")).toHaveTextContent("4")
67+
})
68+
69+
// [Negative number] incrementValue is -1, click on "Add Async" => Count should be 3
70+
await user.clear(incrementValueInput)
71+
await user.type(incrementValueInput, "-1")
72+
await user.press(screen.getByText("Add Async"))
73+
await waitFor(() => {
74+
expect(screen.getByLabelText("Count")).toHaveTextContent("3")
75+
})
76+
})
77+
78+
test("Add If Odd should work as expected", async () => {
79+
const { user } = renderWithProviders(<App />)
80+
81+
// "Add If Odd" button is clicked => Count should stay 0
82+
await user.press(screen.getByText("Add If Odd"))
83+
expect(screen.getByLabelText("Count")).toHaveTextContent("0")
84+
85+
// Click on "+" => Count should be updated to 1
86+
await user.press(screen.getByLabelText("Increment value"))
87+
expect(screen.getByLabelText("Count")).toHaveTextContent("1")
88+
89+
// "Add If Odd" button is clicked => Count should be updated to 3
90+
await user.press(screen.getByText("Add If Odd"))
91+
expect(screen.getByLabelText("Count")).toHaveTextContent("3")
92+
93+
const incrementValueInput = screen.getByLabelText("Set increment amount")
94+
// incrementValue is 1, click on "Add If Odd" => Count should be updated to 4
95+
await user.clear(incrementValueInput)
96+
await user.type(incrementValueInput, "1")
97+
await user.press(screen.getByText("Add If Odd"))
98+
expect(screen.getByLabelText("Count")).toHaveTextContent("4")
99+
100+
// click on "Add If Odd" => Count should stay 4
101+
await user.clear(incrementValueInput)
102+
await user.type(incrementValueInput, "-1")
103+
await user.press(screen.getByText("Add If Odd"))
104+
expect(screen.getByLabelText("Count")).toHaveTextContent("4")
105+
})

‎examples/publish-ci/react-native/App.tsx

Lines changed: 54 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { FC } from 'react';
21
import {
32
SafeAreaView,
43
ScrollView,
@@ -7,75 +6,73 @@ import {
76
Text,
87
View,
98
useColorScheme,
10-
} from 'react-native';
11-
import { Provider } from 'react-redux';
12-
import { store } from './src/app/store';
13-
import { Counter } from './src/features/counter/Counter';
9+
} from "react-native"
10+
import { Counter } from "./src/features/counter/Counter"
1411

1512
import {
1613
DebugInstructions,
1714
HermesBadge,
1815
LearnMoreLinks,
1916
ReloadInstructions,
20-
} from 'react-native/Libraries/NewAppScreen';
21-
import { Header } from './src/components/Header';
22-
import { LearnReduxLinks } from './src/components/LearnReduxLinks';
23-
import { Section } from './src/components/Section';
24-
import { TypedColors } from './src/constants/TypedColors';
17+
} from "react-native/Libraries/NewAppScreen"
18+
import { Header } from "./src/components/Header"
19+
import { LearnReduxLinks } from "./src/components/LearnReduxLinks"
20+
import { Section } from "./src/components/Section"
21+
import { TypedColors } from "./src/constants/TypedColors"
22+
import { Quotes } from "./src/features/quotes/Quotes"
2523

26-
export const App: FC = () => {
27-
const isDarkMode = useColorScheme() === 'dark';
24+
export const App = () => {
25+
const isDarkMode = useColorScheme() === "dark"
2826

2927
const backgroundStyle = {
3028
backgroundColor: isDarkMode ? TypedColors.darker : TypedColors.lighter,
31-
};
29+
}
3230

3331
return (
34-
<Provider store={store}>
35-
<SafeAreaView style={backgroundStyle}>
36-
<StatusBar
37-
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
38-
backgroundColor={backgroundStyle.backgroundColor}
39-
/>
40-
<ScrollView
41-
contentInsetAdjustmentBehavior="automatic"
42-
style={backgroundStyle}>
43-
<Header />
44-
<HermesBadge />
45-
<View
46-
style={{
47-
backgroundColor: isDarkMode
48-
? TypedColors.black
49-
: TypedColors.white,
50-
}}>
51-
<Counter />
52-
<Section title="Step One">
53-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
54-
screen and then come back to see your edits.
55-
</Section>
56-
<Section title="See Your Changes">
57-
<ReloadInstructions />
58-
</Section>
59-
<Section title="Debug">
60-
<DebugInstructions />
61-
</Section>
62-
<Section title="Learn More Redux">
63-
Discover what to do next with Redux:
64-
</Section>
65-
<LearnReduxLinks />
66-
<Section title="Learn More React Native">
67-
Read the docs to discover what to do next:
68-
</Section>
69-
<LearnMoreLinks />
70-
</View>
71-
</ScrollView>
72-
</SafeAreaView>
73-
</Provider>
74-
);
75-
};
32+
<SafeAreaView style={backgroundStyle}>
33+
<StatusBar
34+
barStyle={isDarkMode ? "light-content" : "dark-content"}
35+
backgroundColor={backgroundStyle.backgroundColor}
36+
/>
37+
<ScrollView
38+
contentInsetAdjustmentBehavior="automatic"
39+
style={backgroundStyle}
40+
>
41+
<Header />
42+
<HermesBadge />
43+
<View
44+
style={{
45+
backgroundColor: isDarkMode ? TypedColors.black : TypedColors.white,
46+
}}
47+
>
48+
<Counter />
49+
<Quotes />
50+
<Section title="Step One">
51+
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
52+
screen and then come back to see your edits.
53+
</Section>
54+
<Section title="See Your Changes">
55+
<ReloadInstructions />
56+
</Section>
57+
<Section title="Debug">
58+
<DebugInstructions />
59+
</Section>
60+
<Section title="Learn More Redux">
61+
Discover what to do next with Redux:
62+
</Section>
63+
<LearnReduxLinks />
64+
<Section title="Learn More React Native">
65+
Read the docs to discover what to do next:
66+
</Section>
67+
<LearnMoreLinks />
68+
</View>
69+
</ScrollView>
70+
</SafeAreaView>
71+
)
72+
}
7673

7774
const styles = StyleSheet.create({
7875
highlight: {
79-
fontWeight: '700',
76+
fontWeight: "700",
8077
},
81-
});
78+
})

‎examples/publish-ci/react-native/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ This is a new [**React Native**](https://reactnative.dev) project, bootstrapped
22

33
# Getting Started
44

5-
>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
5+
> **Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
66
77
## Step 1: Start the Metro Server
88

‎examples/publish-ci/react-native/__tests__/App.test.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { render } from '@testing-library/react-native';
2-
import renderer from 'react-test-renderer';
3-
import { App } from '../App';
1+
import { render } from "@testing-library/react-native"
2+
import renderer from "react-test-renderer"
3+
import { App } from "../App"
44

5-
test('renders correctly', () => {
6-
renderer.create(<App />);
7-
const element = render(<App />);
8-
expect(element).toBeDefined();
9-
});
5+
test("renders correctly", () => {
6+
renderer.create(<App />)
7+
const element = render(<App />)
8+
expect(element).toBeDefined()
9+
})

‎examples/publish-ci/react-native/__tests__/counterSlice.test.ts

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
1-
import type { CounterState } from '../src/features/counter/counterSlice';
1+
import type { CounterState } from "../src/features/counter/counterSlice"
22
import {
33
counterSlice,
44
decrement,
55
increment,
66
incrementByAmount,
7-
} from '../src/features/counter/counterSlice';
7+
} from "../src/features/counter/counterSlice"
88

9-
describe('counter reducer', () => {
10-
const { reducer: counterReducer } = counterSlice;
9+
describe("counter reducer", () => {
10+
const { reducer: counterReducer } = counterSlice
1111
const initialState: CounterState = {
1212
value: 3,
13-
status: 'idle',
14-
};
13+
status: "idle",
14+
}
1515

16-
test('should handle initial state', () => {
17-
expect(counterReducer(undefined, { type: 'unknown' })).toStrictEqual({
16+
test("should handle initial state", () => {
17+
expect(counterReducer(undefined, { type: "unknown" })).toStrictEqual({
1818
value: 0,
19-
status: 'idle',
20-
});
21-
});
19+
status: "idle",
20+
})
21+
})
2222

23-
test('should handle increment', () => {
24-
const actual = counterReducer(initialState, increment());
25-
expect(actual.value).toBe(4);
26-
});
23+
test("should handle increment", () => {
24+
const actual = counterReducer(initialState, increment())
25+
expect(actual.value).toBe(4)
26+
})
2727

28-
test('should handle decrement', () => {
29-
const actual = counterReducer(initialState, decrement());
30-
expect(actual.value).toBe(2);
31-
});
28+
test("should handle decrement", () => {
29+
const actual = counterReducer(initialState, decrement())
30+
expect(actual.value).toBe(2)
31+
})
3232

33-
test('should handle incrementByAmount', () => {
34-
const actual = counterReducer(initialState, incrementByAmount(2));
35-
expect(actual.value).toBe(5);
36-
});
37-
});
33+
test("should handle incrementByAmount", () => {
34+
const actual = counterReducer(initialState, incrementByAmount(2))
35+
expect(actual.value).toBe(5)
36+
})
37+
})

‎examples/publish-ci/react-native/babel.config.cts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { TransformOptions } from "@babel/core"
2+
3+
const config: TransformOptions = {
4+
presets: ["module:@react-native/babel-preset"],
5+
}
6+
7+
export default config

‎examples/publish-ci/react-native/babel.config.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎examples/publish-ci/react-native/globals.d.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
declare module '*.gif' {
2-
const logo: number;
3-
export default logo;
1+
declare module "*.gif" {
2+
const logo: number
3+
export default logo
44
}
55

6-
declare module 'react-native/Libraries/NewAppScreen' {
7-
import type { FC } from 'react';
8-
export const HermesBadge: FC;
6+
declare module "react-native/Libraries/NewAppScreen" {
7+
import type { FC } from "react"
8+
export const HermesBadge: FC
99
}
1010

11-
declare module 'react-native/Libraries/Core/Devtools/openURLInBrowser' {
12-
export default function openURLInBrowser(url: string): void;
11+
declare module "react-native/Libraries/Core/Devtools/openURLInBrowser" {
12+
export default function openURLInBrowser(url: string): void
1313
}

‎examples/publish-ci/react-native/index.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)