Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add Example to repo #1697

Merged
merged 1 commit into from
Feb 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions Example/.buckconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

[android]
target = Google Inc.:Google APIs:23

[maven_repositories]
central = https://repo1.maven.org/maven2
4 changes: 4 additions & 0 deletions Example/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
root: true,
extends: '@react-native-community',
};
65 changes: 65 additions & 0 deletions Example/.flowconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore polyfills
node_modules/react-native/Libraries/polyfills/.*

; Flow doesn't support platforms
.*/Libraries/Utilities/LoadingView.js

[untyped]
.*/node_modules/@react-native-community/cli/.*/.*

[include]

[libs]
node_modules/react-native/interface.js
node_modules/react-native/flow/

[options]
emoji=true

exact_by_default=true

format.bracket_spacing=false

module.file_ext=.js
module.file_ext=.json
module.file_ext=.ios.js

munge_underscores=true

module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState

[lints]
sketchy-null-number=warn
sketchy-null-mixed=warn
sketchy-number=warn
untyped-type-import=warn
nonstrict-import=warn
deprecated-type=warn
unsafe-getters-setters=warn
unnecessary-invariant=warn
signature-verification-failure=warn

[strict]
deprecated-type
nonstrict-import
sketchy-null
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import

[version]
^0.170.0
61 changes: 61 additions & 0 deletions Example/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# OSX
#
.DS_Store

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate

# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
*.hprof

# node.js
#
node_modules/
npm-debug.log
yarn-error.log

# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore

# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/

*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots

# Bundle artifact
*.jsbundle

# Ruby / CocoaPods
/ios/Pods/
/vendor/bundle/
7 changes: 7 additions & 0 deletions Example/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
arrowParens: 'avoid',
bracketSameLine: true,
bracketSpacing: false,
singleQuote: true,
trailingComma: 'all',
};
1 change: 1 addition & 0 deletions Example/.watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
237 changes: 237 additions & 0 deletions Example/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
/**
* Sample React Native App for react-native-svg library
* https://github.com/magicismight/react-native-svg/tree/master/Example
*/
'use strict';

import React, { Component } from 'react';
import {
Dimensions,
Platform,
StyleSheet,
Text,
View,
ScrollView,
TouchableHighlight,
TouchableOpacity,
Animated,
Easing,
} from 'react-native';
import Modal from './Modal';
import {
Svg,
Circle,
Ellipse,
G,
TSpan,
TextPath,
Path,
Polygon,
Polyline,
Line,
Rect,
Use,
Image,
Symbol,
Defs,
LinearGradient,
RadialGradient,
Stop,
ClipPath,
Pattern,
Mask,
Marker,
} from './Svg';

import * as examples from './examples';

const hairline = StyleSheet.hairlineWidth;

const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
alignItems: 'center',
overflow: 'hidden',
},
contentContainer: {
alignSelf: 'stretch',
borderTopWidth: hairline,
borderTopColor: '#ccc',
borderBottomWidth: hairline,
borderBottomColor: '#ccc',
flexWrap: 'wrap',
flexDirection: 'row',
marginHorizontal: 10,
},
welcome: {
padding: 10,
color: '#f60',
fontSize: 18,
fontWeight: 'bold',
},
link: {
height: 40,
alignSelf: 'stretch',
width: Dimensions.get('window').width / 2 - 10,
},
title: {
marginLeft: 10,
},
cell: {
height: 40,
paddingHorizontal: 10,
alignSelf: 'stretch',
alignItems: 'center',
flexDirection: 'row',
borderTopWidth: hairline,
borderTopColor: '#ccc',
marginTop: -hairline,
backgroundColor: 'transparent',
},
close: {
position: 'absolute',
right: 20,
top: 40,
},
scroll: {
position: 'absolute',
top: 30,
right: 10,
bottom: 20,
left: 10,
backgroundColor: '#fff',
},
scrollContent: {
borderTopWidth: hairline,
borderTopColor: '#ccc',
},
example: {
paddingVertical: 25,
alignSelf: 'stretch',
alignItems: 'center',
borderBottomWidth: hairline,
borderBottomColor: '#ccc',
},
sampleTitle: {
marginHorizontal: 15,
fontSize: 16,
color: '#666',
},
});

const names = [
'Svg',
'Stroking',
'Path',
'Line',
'Rect',
'Polygon',
'Polyline',
'Circle',
'Ellipse',
'G',
'Text',
'Gradients',
'Clipping',
'Image',
'TouchEvents',
'PanResponder',
'Reusable',
];

const initialState = {
modal: false,
content: null,
};

export default class SvgExample extends Component {
state = initialState;

show = name => {
if (this.state.modal) {
return;
}
let example = examples[name];
if (example) {
let samples = example.samples;
this.setState({
modal: true,
content: (
<View>
{samples.map((Sample, i) => (
<View style={styles.example} key={`sample-${i}`}>
<Text style={styles.sampleTitle}>{Sample.title}</Text>
<Sample />
</View>
))}
</View>
),
scroll: example.scroll !== false,
});
}
};

hide = () => {
this.setState(initialState);
};

getExamples = () => {
return names.map(name => {
var icon;
let example = examples[name];
if (example) {
icon = example.icon;
}
return (
<TouchableHighlight
style={styles.link}
underlayColor="#ccc"
key={`example-${name}`}
onPress={() => this.show(name)}>
<View style={styles.cell}>
{icon}
<Text style={styles.title}>{name}</Text>
</View>
</TouchableHighlight>
);
});
};

modalContent = () => (
<>
<ScrollView
style={styles.scroll}
contentContainerStyle={styles.scrollContent}
scrollEnabled={this.state.scroll}>
{this.state.content}
</ScrollView>
<View style={styles.close}>
<TouchableOpacity activeOpacity={0.7} onPress={this.hide}>
<Svg height="20" width="20">
<Circle cx="10" cy="10" r="10" fill="red" />
<Line x1="4" y1="4" x2="16" y2="16" stroke="#fff" strokeWidth="2" />
<Line x1="4" y1="16" x2="16" y2="4" stroke="#fff" strokeWidth="2" />
</Svg>
</TouchableOpacity>
</View>
</>
);

render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>SVG library for React Apps</Text>
<View style={styles.contentContainer}>{this.getExamples()}</View>
<Modal
ariaHideApp={false}
transparent={false}
animationType="fade"
visible={this.state.modal}
onRequestClose={this.hide}>
{this.modalContent()}
</Modal>
</View>
);
}
}
6 changes: 6 additions & 0 deletions Example/Gemfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
source 'https://rubygems.org'

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby '2.7.4'

gem 'cocoapods', '~> 1.11', '>= 1.11.2'
Loading