Skip to content

Instantly share code, notes, and snippets.

@nazrdogan
Last active November 14, 2023 19:01
Show Gist options
  • Save nazrdogan/499c335e3edbe0b7d69a251067c46094 to your computer and use it in GitHub Desktop.
Save nazrdogan/499c335e3edbe0b7d69a251067c46094 to your computer and use it in GitHub Desktop.
React Native Ribbon
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import Svg, {
SvgProps,
Path,
Polygon,
G,
Rect,
Text,
Line,
} from 'react-native-svg';
function SvgComponent(props: SvgProps) {
const { color } = props;
return (
<Svg height="70" width="70">
<Polygon points="0 0, 0 10, 10 10" fill={color} strokeWidth="0" />
<Polygon points="0 0, 70 70, 70 40, 30 0" fill={color} strokeWidth="0" />
<Polygon points="60 60, 60 70, 70 70" fill={color} strokeWidth="0" />
<G rotation="45" origin="130, -20">
<Text x="100" y="80" stroke="#600" fill="#600" textAnchor="middle">
Text
</Text>
</G>
</Svg>
);
}
export default function App() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: '#ADD8E6', width: 350, height: 200 }}>
<View style={{ position: 'absolute', top: -10, right: -10 }}>
<SvgComponent color={'red'} />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment