generated from nishkohli96/rn-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* first commit * name change wip * ios run successful * add husky * wip * clipboard & pressable * rn-config * rn-action-view * rn-contacts to start * wip * rn-contacts done * wip * razorpay done * permissions screen * location wip * wip * ios-permissions wip * rm rn-permissions * geolocation svc done * update README * minor changes * minor changes * intial setup android * fixes after merge * razorpay now works * getcontacts wip * contacts android done * location & contacts done * remove unused libs * remove netinfo * run prettier * ios app start changes * add basic rn-chart-wrapper * wip * separate chart modules for android & ios * add more datapoints to radar chart * update readme * add basic victory charts * wip * list view * polar chart basic done * polar chart wip * wip Co-authored-by: nish <[email protected]>
- Loading branch information
1 parent
630798e
commit 9a79c55
Showing
15 changed files
with
1,047 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| export const PermissionsList = [ | ||
| { | ||
| navigateRoute: 'ContactsList', | ||
| iconName: 'person-outline', | ||
| label: 'Contacts', | ||
| }, | ||
| { | ||
| navigateRoute: 'Location', | ||
| iconName: 'location-outline', | ||
| label: 'Location', | ||
| }, | ||
| ]; | ||
|
|
||
| export const ChartsList = [ | ||
| { | ||
| navigateRoute: 'VictoryBarChart', | ||
| label: 'Victory BarChart', | ||
| }, | ||
| { | ||
| navigateRoute: 'VictoryPolarChart', | ||
| label: 'Victory PolarChart', | ||
| }, | ||
| /* No iOS code for these 2 pages, so they're at the bottom of the list */ | ||
| { | ||
| navigateRoute: 'LineChartScreen', | ||
| label: 'Line Chart', | ||
| }, | ||
| { | ||
| navigateRoute: 'RadarChartScreen', | ||
| label: 'Radar Chart', | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { StyleSheet } from 'react-native'; | ||
| import { LineChart } from 'react-native-charts-wrapper'; | ||
| import { ThemedContainer, ThemedBody, ThemedCard } from '_Shared/Comps.themed'; | ||
| import Header from '_Shared/Header'; | ||
|
|
||
| const LineChartScreen = () => { | ||
| return ( | ||
| <ThemedContainer> | ||
| <Header title="Line Chart" /> | ||
| <ThemedBody> | ||
| <ThemedCard> | ||
| <LineChart | ||
| style={styles.chart} | ||
| data={{ | ||
| dataSets: [ | ||
| { | ||
| label: 'demo', | ||
| values: [{ y: 1 }, { y: 2 }, { y: 1 }], | ||
| }, | ||
| ], | ||
| }} | ||
| /> | ||
| </ThemedCard> | ||
| </ThemedBody> | ||
| </ThemedContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| chart: { | ||
| width: 300, | ||
| height: 600, | ||
| }, | ||
| }); | ||
|
|
||
| export default LineChartScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import React from 'react'; | ||
| import { StyleSheet, View, processColor } from 'react-native'; | ||
| import { RadarChart } from 'react-native-charts-wrapper'; | ||
|
|
||
| import { | ||
| ThemedContainer, | ||
| ThemedBody, | ||
| ThemedCard, | ||
| ThemedText, | ||
| } from '_Shared/Comps.themed'; | ||
| import Header from '_Shared/Header'; | ||
|
|
||
| const RadarChartScreen = () => { | ||
| const legend = { | ||
| enabled: true, | ||
| textSize: 14, | ||
| form: 'CIRCLE', | ||
| wordWrapEnabled: true, | ||
| }; | ||
|
|
||
| const xAxis = { | ||
| valueFormatter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'], | ||
| zeroLine: { | ||
| enabled: true, | ||
| lineWidth: 1.5, | ||
| }, | ||
| }; | ||
|
|
||
| const data = { | ||
| dataSets: [ | ||
| { | ||
| values: [ | ||
| { value: 90 }, | ||
| { value: 110 }, | ||
| { value: 125 }, | ||
| { value: 115 }, | ||
| { value: 110 }, | ||
| { value: 130 }, | ||
| { value: 107 }, | ||
| { value: 126 }, | ||
| { value: 104 }, | ||
| { value: 109 }, | ||
| ], | ||
| label: 'Some stat', | ||
| config: { | ||
| color: processColor('#FF8C9D'), | ||
| drawFilled: true, | ||
| fillColor: processColor('#FF8C9D'), | ||
| fillAlpha: 100, | ||
| lineWidth: 2, | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const [selectedEntry, setSelectedEntry] = React.useState(''); | ||
|
|
||
| const handleSelect = event => { | ||
| let entry = event.nativeEvent; | ||
| if (entry === null) { | ||
| setSelectedEntry(''); | ||
| } else { | ||
| setSelectedEntry(JSON.stringify(entry)); | ||
| } | ||
| console.log(event.nativeEvent); | ||
| }; | ||
|
|
||
| return ( | ||
| <ThemedContainer> | ||
| <Header title="Radar Chart" /> | ||
| <ThemedBody> | ||
| <ThemedCard> | ||
| <View style={styles.textView}> | ||
| <ThemedText> selected entry</ThemedText> | ||
| <ThemedText> {selectedEntry}</ThemedText> | ||
| </View> | ||
|
|
||
| <View> | ||
| <RadarChart | ||
| style={styles.chart} | ||
| data={data} | ||
| xAxis={xAxis} | ||
| yAxis={{ drawLabels: true }} | ||
| chartDescription={{ text: '' }} | ||
| legend={legend} | ||
| drawWeb={true} | ||
| webLineWidth={5} | ||
| webLineWidthInner={2} | ||
| webAlpha={255} | ||
| webColor={processColor('#007aba')} | ||
| webColorInner={processColor('silver')} | ||
| skipWebLineCount={1} | ||
| onSelect={e => handleSelect(e)} | ||
| onChange={event => console.log(event.nativeEvent)} | ||
| /> | ||
| </View> | ||
| </ThemedCard> | ||
| </ThemedBody> | ||
| </ThemedContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| chart: { | ||
| width: 300, | ||
| height: 500, | ||
| }, | ||
| textView: { height: 80 }, | ||
| }); | ||
|
|
||
| export default RadarChartScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React from 'react'; | ||
| import { | ||
| VictoryBar, | ||
| VictoryChart, | ||
| VictoryTheme, | ||
| VictoryLabel, | ||
| } from 'victory-native'; | ||
| import { ThemedContainer, ThemedBody, ThemedCard } from '_Shared/Comps.themed'; | ||
| import Header from '_Shared/Header'; | ||
|
|
||
| const data = [ | ||
| /* Label is optional */ | ||
| { quarter: 1, earnings: 13000, label: 'Q1' }, | ||
| { quarter: 2, earnings: 16500, label: 'Q2' }, | ||
| { quarter: 3, earnings: 14250, label: 'Q3' }, | ||
| { quarter: 4, earnings: 19000, label: 'Q4' }, | ||
| ]; | ||
|
|
||
| const VictoryBarChart = () => { | ||
| return ( | ||
| <ThemedContainer> | ||
| <Header title="Victory Bar Chart" /> | ||
| <ThemedBody> | ||
| <ThemedCard> | ||
| <VictoryChart width={350} theme={VictoryTheme.material}> | ||
| <VictoryBar | ||
| style={{ data: { fill: '#c43a31' } }} | ||
| data={data} | ||
| x="quarter" | ||
| y="earnings" | ||
| labelComponent={ | ||
| <VictoryLabel | ||
| dy={-20} | ||
| backgroundStyle={{ | ||
| fill: 'gold', | ||
| opacity: 0.6, | ||
| }} | ||
| backgroundPadding={{ bottom: 5, top: 5 }} | ||
| /> | ||
| } | ||
| /> | ||
| </VictoryChart> | ||
| </ThemedCard> | ||
| </ThemedBody> | ||
| </ThemedContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default VictoryBarChart; |
Oops, something went wrong.