Skip to content

Commit c1538cc

Browse files
GregoryNativeGregoryNative
committed
examples/expo: update to 0.3.1
1 parent 6a4164f commit c1538cc

File tree

5 files changed

+3192
-829
lines changed

5 files changed

+3192
-829
lines changed

‎examples/expo/App.js

Lines changed: 22 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,35 @@
11
import React, { Component } from 'react';
2-
import { Dimensions, StyleSheet } from 'react-native';
3-
import {
4-
Container,
5-
Content,
6-
Header,
7-
Body,
8-
Title,
9-
Text,
10-
Button,
11-
} from 'native-base';
12-
import { Surface } from 'gl-react-expo';
13-
import ImageFilters from 'react-native-gl-image-filters';
2+
import { SafeAreaView } from 'react-native';
3+
import AppLoading from 'expo-app-loading';
4+
import * as Font from 'expo-font';
5+
import { Ionicons } from '@expo/vector-icons';
146

15-
import Filter from './Filter';
16-
17-
const width = Dimensions.get('window').width - 40;
18-
19-
const settings = [
20-
{
21-
name: 'hue',
22-
minValue: 0,
23-
maxValue: 6.3,
24-
},
25-
{
26-
name: 'blur',
27-
minValue: 0,
28-
maxValue: 30,
29-
},
30-
{
31-
name: 'sepia',
32-
minValue: -5,
33-
maxValue: 5,
34-
},
35-
{
36-
name: 'sharpen',
37-
minValue: 0,
38-
maxValue: 15,
39-
},
40-
{
41-
name: 'negative',
42-
minValue: -2.0,
43-
maxValue: 2.0,
44-
},
45-
{
46-
name: 'contrast',
47-
minValue: -10.0,
48-
maxValue: 10.0,
49-
},
50-
{
51-
name: 'saturation',
52-
minValue: 0.0,
53-
maxValue: 2,
54-
},
55-
{
56-
name: 'brightness',
57-
minValue: 0,
58-
maxValue: 5,
59-
},
60-
{
61-
name: 'temperature',
62-
minValue: 0.0,
63-
maxValue: 40000.0,
64-
},
65-
];
7+
import AppExample from './AppExample';
668

679
export default class App extends Component {
6810
state = {
69-
...settings,
70-
hue: 0,
71-
blur: 0,
72-
sepia: 0,
73-
sharpen: 0,
74-
negative: 0,
75-
contrast: 1,
76-
saturation: 1,
77-
brightness: 1,
78-
temperature: 6500,
11+
isReady: false,
7912
};
8013

81-
saveImage = async () => {
82-
if (!this.image) return;
83-
84-
const result = await this.image.glView.capture();
85-
console.warn(result);
86-
};
14+
async componentDidMount() {
15+
await Font.loadAsync({
16+
Roboto: require('native-base/Fonts/Roboto.ttf'),
17+
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
18+
...Ionicons.font,
19+
});
20+
21+
this.setState({ isReady: true });
22+
}
8723

8824
render() {
25+
if (!this.state.isReady) {
26+
return <AppLoading />;
27+
}
28+
8929
return (
90-
<Container>
91-
<Header>
92-
<Body>
93-
<Title>Image Filters</Title>
94-
</Body>
95-
</Header>
96-
<Content style={styles.content} showsVerticalScrollIndicator={false}>
97-
<Surface style={{ width, height: width }} ref={ref => (this.image = ref)}>
98-
<ImageFilters {...this.state} width={width} height={width}>
99-
{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
100-
</ImageFilters>
101-
</Surface>
102-
{settings.map(filter => (
103-
<Filter
104-
key={filter.name}
105-
name={filter.name}
106-
minimum={filter.minValue}
107-
maximum={filter.maxValue}
108-
onChange={value => this.setState({ [filter.name]: value })}
109-
/>
110-
))}
111-
<Button
112-
rounded={false}
113-
style={styles.button}
114-
block
115-
onPress={this.saveImage}>
116-
<Text>Save</Text>
117-
</Button>
118-
</Content>
119-
</Container>
30+
<SafeAreaView style={{ flex: 1, backgroundColor: '#F8F8F8' }}>
31+
<AppExample />
32+
</SafeAreaView>
12033
);
12134
}
12235
}
123-
124-
const styles = StyleSheet.create({
125-
content: { marginTop: 20, marginHorizontal: 20 },
126-
button: { marginVertical: 20, borderRadius: 0 },
127-
});

‎examples/expo/AppExample.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import React, { Component } from 'react';
2+
import {
3+
Dimensions,
4+
StyleSheet,
5+
ScrollView,
6+
} from 'react-native';
7+
import {
8+
Container,
9+
Header,
10+
Body,
11+
Title,
12+
Text,
13+
Button,
14+
} from 'native-base';
15+
import { Surface } from 'gl-react-expo';
16+
import ImageFilters, { Constants } from 'react-native-gl-image-filters';
17+
18+
import Filter from './Filter';
19+
20+
const width = Dimensions.get('window').width - 40;
21+
22+
const settings = [
23+
{
24+
name: 'hue',
25+
minValue: 0,
26+
maxValue: 6.3,
27+
},
28+
{
29+
name: 'blur',
30+
minValue: 0,
31+
maxValue: 30,
32+
},
33+
{
34+
name: 'sepia',
35+
minValue: -5,
36+
maxValue: 5,
37+
},
38+
{
39+
name: 'sharpen',
40+
minValue: 0,
41+
maxValue: 15,
42+
},
43+
{
44+
name: 'negative',
45+
minValue: -2.0,
46+
maxValue: 2.0,
47+
},
48+
{
49+
name: 'contrast',
50+
minValue: -10.0,
51+
maxValue: 10.0,
52+
},
53+
{
54+
name: 'saturation',
55+
minValue: 0.0,
56+
maxValue: 2,
57+
},
58+
{
59+
name: 'brightness',
60+
minValue: 0,
61+
maxValue: 5,
62+
},
63+
{
64+
name: 'temperature',
65+
minValue: 0.0,
66+
maxValue: 40000.0,
67+
},
68+
{
69+
name: 'exposure',
70+
step: 0.05,
71+
minValue: -1.0,
72+
maxValue: 1.0,
73+
},
74+
];
75+
76+
export default class AppExample extends Component {
77+
state = {
78+
...settings,
79+
hue: 0,
80+
blur: 0,
81+
sepia: 0,
82+
sharpen: 0,
83+
negative: 0,
84+
contrast: 1,
85+
saturation: 1,
86+
brightness: 1,
87+
temperature: 6500,
88+
exposure: 0,
89+
};
90+
91+
saveImage = async () => {
92+
if (!this.image) return;
93+
94+
const result = await this.image.glView.capture();
95+
console.warn(result);
96+
};
97+
98+
resetImage = () => {
99+
this.setState({
100+
...Constants.DefaultValues,
101+
});
102+
}
103+
104+
render() {
105+
return (
106+
<Container>
107+
<Header>
108+
<Body>
109+
<Title>Image Filters</Title>
110+
</Body>
111+
</Header>
112+
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
113+
<>
114+
<Surface style={{ width, height: width }} ref={ref => (this.image = ref)}>
115+
<ImageFilters {...this.state} width={width} height={width}>
116+
{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
117+
</ImageFilters>
118+
</Surface>
119+
{settings.map(filter => (
120+
<Filter
121+
key={filter.name}
122+
name={filter.name}
123+
minimum={filter.minValue}
124+
maximum={filter.maxValue}
125+
onChange={value => this.setState({ [filter.name]: value })}
126+
/>
127+
))}
128+
<Button
129+
rounded={false}
130+
style={styles.button}
131+
block
132+
onPress={this.saveImage}>
133+
<Text>Save</Text>
134+
</Button>
135+
<Button
136+
rounded={false}
137+
danger
138+
style={styles.button}
139+
block
140+
onPress={this.resetImage}>
141+
<Text>Reset</Text>
142+
</Button>
143+
</>
144+
</ScrollView>
145+
</Container>
146+
);
147+
}
148+
}
149+
150+
const styles = StyleSheet.create({
151+
content: { marginTop: 20, marginHorizontal: 20 },
152+
button: { marginTop: 20, borderRadius: 0 },
153+
});

‎examples/expo/app.json

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
{
22
"expo": {
3-
"name": "Blank Template",
3+
"name": "Expo example for react-native-gl-image-filters",
44
"slug": "example-expo",
55
"privacy": "public",
6-
"sdkVersion": "36.0.0",
76
"platforms": [
87
"ios",
9-
"android",
10-
"web"
8+
"android"
119
],
12-
"version": "1.0.0",
10+
"version": "0.3.1",
1311
"orientation": "portrait",
1412
"icon": "./assets/icon.png",
1513
"splash": {

‎examples/expo/package.json

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
{
22
"main": "node_modules/expo/AppEntry.js",
33
"scripts": {
4-
"preinstall": "cd ../.. && npm install && npm run compile",
54
"start": "expo start",
65
"android": "expo start --android",
76
"ios": "expo start --ios",
87
"web": "expo start --web",
98
"eject": "expo eject"
109
},
1110
"dependencies": {
11+
"@expo/vector-icons": "^12.0.3",
1212
"buffer": "^5.5.0",
13-
"expo": "~36.0.0",
14-
"expo-gl": "^8.0.0",
13+
"expo": "^40.0.0",
14+
"expo-app-loading": "^1.0.1",
15+
"expo-font": "~8.4.0",
16+
"expo-gl": "~9.2.0",
1517
"gl-react": "^4.0.1",
1618
"gl-react-expo": "^4.0.1",
17-
"native-base": "^2.13.8",
18-
"react": "~16.9.0",
19-
"react-dom": "~16.9.0",
20-
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
21-
"react-native-gl-image-filters": "file:../../"
19+
"native-base": "^2.13.0",
20+
"react": "16.13.1",
21+
"react-dom": "16.13.1",
22+
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
23+
"react-native-gl-image-filters": "0.3.1"
2224
},
2325
"devDependencies": {
24-
"@babel/core": "^7.0.0",
25-
"babel-preset-expo": "~8.0.0"
26+
"@babel/core": "~7.9.0",
27+
"babel-preset-expo": "8.3.0"
2628
},
2729
"private": true
2830
}

0 commit comments

Comments
 (0)