Skip to content

Commit 121b617

Browse files
ceceppaceceppa
committed
Add support for mocking files
1 parent e0d3631 commit 121b617

File tree

12 files changed

+232
-79
lines changed

12 files changed

+232
-79
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,6 @@ typings/
5858

5959
# generated js
6060
dist/
61+
62+
# IntelliJ
63+
/.idea

‎example/App.tsx

+2-69
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React from 'react';
22
import {
3-
ActivityIndicator,
43
Image,
5-
Pressable,
64
ScrollView,
75
StatusBar,
86
StyleSheet,
97
Text,
10-
TextInput,
118
View,
129
} from 'react-native';
10+
import { PressMe } from './src/PressMe';
1311

1412
const Section: React.FC<{
1513
title: string;
@@ -23,20 +21,6 @@ const Section: React.FC<{
2321
};
2422

2523
const App = () => {
26-
const [text, setText] = React.useState('');
27-
const [isLongPressed, setIsLongPressed] = React.useState(false);
28-
const [isLoading, setIsLoading] = React.useState(false);
29-
const [isLoaded, setIsLoaded] = React.useState(false);
30-
31-
React.useEffect(() => {
32-
if (isLoading) {
33-
setTimeout(() => {
34-
setIsLoading(false);
35-
setIsLoaded(true);
36-
}, 1500);
37-
}
38-
}, [isLoading]);
39-
4024
return (
4125
<ScrollView
4226
contentInsetAdjustmentBehavior="automatic"
@@ -48,39 +32,7 @@ const App = () => {
4832

4933
<Image source={require('./assets/logo.png')} style={styles.logo} />
5034

51-
<View style={styles.header}>
52-
{!isLoaded && !isLoading && (
53-
<Pressable
54-
testID="Pressable"
55-
onPress={() => setIsLoading(true)}
56-
onLongPress={() => setIsLongPressed(true)}
57-
style={styles.button}
58-
>
59-
<Text style={styles.buttonText}>Press Me</Text>
60-
<Text style={styles.buttonArrow}>&#8594;</Text>
61-
</Pressable>
62-
)}
63-
64-
{isLoading && <ActivityIndicator />}
65-
66-
{isLongPressed && !isLoading && !isLoaded && (
67-
<Text style={styles.textLongPressed}>Long Pressed!</Text>
68-
)}
69-
70-
{!isLoading && isLoaded && (
71-
<>
72-
<Text style={styles.textInputLabel}>This is a label *</Text>
73-
74-
<TextInput
75-
testID="TextInput"
76-
placeholder="Type something here"
77-
onChangeText={setText}
78-
value={text}
79-
style={styles.textInput}
80-
/>
81-
</>
82-
)}
83-
</View>
35+
<PressMe />
8436

8537
<Section title="Setup">
8638
Install <Text style={styles.highlight}>react-native-owl</Text> and
@@ -129,25 +81,6 @@ const styles = StyleSheet.create({
12981
height: 175,
13082
alignSelf: 'center',
13183
},
132-
header: {
133-
marginVertical: 35,
134-
},
135-
button: {
136-
flexDirection: 'row',
137-
justifyContent: 'space-between',
138-
alignItems: 'center',
139-
borderWidth: 2,
140-
paddingVertical: 7.5,
141-
paddingHorizontal: 20,
142-
borderRadius: 20,
143-
},
144-
buttonText: {
145-
fontSize: 16,
146-
fontWeight: '600',
147-
},
148-
buttonArrow: {
149-
fontSize: 20,
150-
},
15184
sectionContainer: {
15285
marginBottom: 32,
15386
},

‎example/babel.config.js

+19
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
11
module.exports = {
22
presets: ['module:metro-react-native-babel-preset'],
3+
plugins: [
4+
[
5+
'module-resolver',
6+
{
7+
root: ['./src'],
8+
extensions: [
9+
'.owl.ts',
10+
'.owl.tsx',
11+
'.owl.js',
12+
'.owl.jsx',
13+
'.ts',
14+
'.tsx',
15+
'.js',
16+
'.jsx',
17+
],
18+
alias: {},
19+
},
20+
],
21+
],
322
};

‎example/metro.config.js

+23-8
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,28 @@ const extraNodeModules = {
1414
};
1515
const watchFolders = [path.resolve(path.join(__dirname, '..', 'dist'))];
1616

17+
const resolver = {
18+
extraNodeModules: new Proxy(extraNodeModules, {
19+
get: (target, name) =>
20+
name in target
21+
? target[name]
22+
: path.join(process.cwd(), `node_modules/${name}`),
23+
}),
24+
};
25+
26+
if (process.env.OWL_BUILD) {
27+
resolver.sourceExts = [
28+
'owl.ts',
29+
'owl.tsx',
30+
'owl.js',
31+
'owl.jsx',
32+
'ts',
33+
'tsx',
34+
'js',
35+
'jsx',
36+
];
37+
}
38+
1739
module.exports = {
1840
transformer: {
1941
getTransformOptions: async () => ({
@@ -23,13 +45,6 @@ module.exports = {
2345
},
2446
}),
2547
},
26-
resolver: {
27-
extraNodeModules: new Proxy(extraNodeModules, {
28-
get: (target, name) =>
29-
name in target
30-
? target[name]
31-
: path.join(process.cwd(), `node_modules/${name}`),
32-
}),
33-
},
48+
resolver,
3449
watchFolders,
3550
};

‎example/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@types/react-native": "^0.65.0",
2828
"@types/react-test-renderer": "^17.0.1",
2929
"babel-jest": "^26.6.3",
30+
"babel-plugin-module-resolver": "^4.1.0",
3031
"eslint": "^7.14.0",
3132
"jest": "^26.6.3",
3233
"metro-react-native-babel-preset": "^0.66.2",

‎example/src/PressMe.button.owl.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from 'react';
2+
import { Button } from 'react-native';
3+
4+
export const PressMeButton = () => {
5+
return <Button title={'Owl Button'} />;
6+
};

‎example/src/PressMe.button.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from 'react';
2+
import { Button } from 'react-native';
3+
4+
export const PressMeButton = () => {
5+
return <Button title={'App Button'} />;
6+
};

‎example/src/PressMe.tsx

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import {
2+
ActivityIndicator,
3+
Pressable,
4+
StyleSheet,
5+
Text,
6+
TextInput,
7+
View,
8+
} from 'react-native';
9+
import React from 'react';
10+
import { PressMeButton } from './PressMe.button';
11+
12+
export const PressMe = () => {
13+
const [text, setText] = React.useState('');
14+
const [isLongPressed, setIsLongPressed] = React.useState(false);
15+
const [isLoading, setIsLoading] = React.useState(false);
16+
const [isLoaded, setIsLoaded] = React.useState(false);
17+
18+
React.useEffect(() => {
19+
if (isLoading) {
20+
setTimeout(() => {
21+
setIsLoading(false);
22+
setIsLoaded(true);
23+
}, 1500);
24+
}
25+
}, [isLoading]);
26+
27+
return (
28+
<View style={styles.header}>
29+
{!isLoaded && !isLoading && (
30+
<Pressable
31+
testID="Pressable"
32+
onPress={() => setIsLoading(true)}
33+
onLongPress={() => setIsLongPressed(true)}
34+
style={styles.button}
35+
>
36+
<Text style={styles.buttonText}>Press Me</Text>
37+
<Text style={styles.buttonArrow}>&#8594;</Text>
38+
</Pressable>
39+
)}
40+
41+
{isLoading && <ActivityIndicator />}
42+
43+
{isLongPressed && !isLoading && !isLoaded && (
44+
<Text style={styles.textLongPressed}>Long Pressed!</Text>
45+
)}
46+
47+
{!isLoading && isLoaded && (
48+
<>
49+
<Text style={styles.textInputLabel}>This is a label *</Text>
50+
51+
<TextInput
52+
testID="TextInput"
53+
placeholder="Type something here"
54+
onChangeText={setText}
55+
value={text}
56+
style={styles.textInput}
57+
/>
58+
59+
<PressMeButton />
60+
</>
61+
)}
62+
</View>
63+
);
64+
};
65+
66+
const styles = StyleSheet.create({
67+
header: {
68+
marginVertical: 35,
69+
},
70+
button: {
71+
flexDirection: 'row',
72+
justifyContent: 'space-between',
73+
alignItems: 'center',
74+
borderWidth: 2,
75+
paddingVertical: 7.5,
76+
paddingHorizontal: 20,
77+
borderRadius: 20,
78+
},
79+
textLongPressed: {
80+
marginTop: 35,
81+
fontSize: 20,
82+
fontStyle: 'italic',
83+
textAlign: 'center',
84+
},
85+
textInputLabel: {
86+
fontWeight: '600',
87+
marginBottom: 5,
88+
paddingHorizontal: 20,
89+
},
90+
textInput: {
91+
borderWidth: 1,
92+
paddingVertical: 12,
93+
paddingHorizontal: 20,
94+
borderRadius: 20,
95+
},
96+
highlight: {
97+
fontWeight: '700',
98+
},
99+
buttonText: {
100+
fontSize: 16,
101+
fontWeight: '600',
102+
},
103+
buttonArrow: {
104+
fontSize: 20,
105+
},
106+
});

0 commit comments

Comments
 (0)