Skip to content

Commit

Permalink
chore: update example to funcitonal components (#1389)
Browse files Browse the repository at this point in the history
  • Loading branch information
@okwasniewski
okwasniewski committed Sep 19, 2022
1 parent 9aaa5f8 commit 302e682
Show file tree
Hide file tree
Showing 7 changed files with 296 additions and 364 deletions.
218 changes: 94 additions & 124 deletions packages/react-native-tab-view/example/src/App.tsx
View file
Expand Up @@ -23,12 +23,6 @@ import CustomTabBarExample from './CustomTabBarExample';
import CoverflowExample from './CoverflowExample';
import TabBarGapExample from './TabBarGapExample';

type State = {
title: string;
index: number;
restoring: boolean;
};

type ExampleComponentType = React.ComponentType<{}> & {
title: string;
tintColor?: string;
Expand All @@ -51,21 +45,14 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
TabBarGapExample,
];

const KeepAwake = () => {
const ExampleList = () => {
useKeepAwake();
return null;
};
const [index, setIndex] = React.useState(-1);
const [restoring, setRestoring] = React.useState(false);

export default class ExampleList extends React.Component<any, State> {
state = {
title: 'Examples',
index: -1,
restoring: false,
};

componentDidMount() {
React.useEffect(() => {
if (process.env.NODE_ENV !== 'production') {
this.restoreNavigationState();
restoreNavigationState();
}

[
Expand All @@ -78,18 +65,16 @@ export default class ExampleList extends React.Component<any, State> {
require('../assets/album-art-7.jpg'),
require('../assets/album-art-8.jpg'),
].map((image) => Asset.fromModule(image).downloadAsync());
}
}, []);

private persistNavigationState = async (currentIndex: number) => {
const persistNavigationState = async (currentIndex: number) => {
if (process.env.NODE_ENV !== 'production') {
await AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(currentIndex));
}
};

private restoreNavigationState = async () => {
this.setState({
restoring: true,
});
const restoreNavigationState = async () => {
setRestoring(true);

const savedIndexString = await AsyncStorage.getItem(PERSISTENCE_KEY);

Expand All @@ -101,129 +86,114 @@ export default class ExampleList extends React.Component<any, State> {
savedIndex >= 0 &&
savedIndex < EXAMPLE_COMPONENTS.length
) {
this.setState({
index: savedIndex,
});
setIndex(savedIndex);
}
} catch (e) {
// ignore
}

this.setState({
restoring: false,
});
setRestoring(false);
};

private handleNavigate = (index: number) => {
this.setState({
index,
});
this.persistNavigationState(index);
const handleNavigate = (index: number) => {
setIndex(index);
persistNavigationState(index);
};

private handleNavigateBack = () => {
this.handleNavigate(-1);
const handleNavigateBack = () => {
handleNavigate(-1);
};

private renderItem = (component: ExampleComponentType, i: number) => (
const renderItem = (component: ExampleComponentType, i: number) => (
<TouchableOpacity
key={i}
style={styles.touchable}
onPress={() => this.handleNavigate(i)}
onPress={() => handleNavigate(i)}
>
<Text style={styles.item}>
{i + 1}. {component.title}
</Text>
</TouchableOpacity>
);

render() {
if (this.state.restoring) {
return null;
}

const { index } = this.state;

const ExampleComponent = EXAMPLE_COMPONENTS[index] || null;
const backgroundColor = ExampleComponent?.backgroundColor
? ExampleComponent.backgroundColor
: '#111';
const tintColor =
ExampleComponent && typeof ExampleComponent.tintColor === 'string'
? ExampleComponent.tintColor
: 'white';
const appbarElevation =
ExampleComponent && typeof ExampleComponent.appbarElevation === 'number'
? ExampleComponent.appbarElevation
: 4;
const statusBarStyle =
ExampleComponent && typeof ExampleComponent.statusBarStyle === 'string'
? ExampleComponent.statusBarStyle
: 'light-content';
const borderBottomWidth =
Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0;
if (restoring) {
return null;
}

return (
<SafeAreaProvider>
<StatusBar
translucent
barStyle={Platform.OS === 'ios' ? statusBarStyle : 'light-content'}
/>
<KeepAwake />
<View style={styles.container}>
<SafeAreaView
edges={['top']}
style={[
styles.appbar,
backgroundColor ? { backgroundColor } : null,
appbarElevation
? { elevation: appbarElevation, borderBottomWidth }
: null,
]}
>
<View style={styles.appbarContent}>
{index > -1 ? (
<TouchableOpacity
style={styles.button}
onPress={this.handleNavigateBack}
>
<Ionicons
name={
Platform.OS === 'android'
? 'md-arrow-back'
: 'ios-arrow-back'
}
size={24}
color={tintColor}
/>
</TouchableOpacity>
) : null}
<Text
style={[styles.title, tintColor ? { color: tintColor } : null]}
const ExampleComponent = EXAMPLE_COMPONENTS[index] || null;
const backgroundColor = ExampleComponent?.backgroundColor
? ExampleComponent.backgroundColor
: '#111';
const tintColor =
ExampleComponent && typeof ExampleComponent.tintColor === 'string'
? ExampleComponent.tintColor
: 'white';
const appbarElevation =
ExampleComponent && typeof ExampleComponent.appbarElevation === 'number'
? ExampleComponent.appbarElevation
: 4;
const statusBarStyle =
ExampleComponent && typeof ExampleComponent.statusBarStyle === 'string'
? ExampleComponent.statusBarStyle
: 'light-content';
const borderBottomWidth =
Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0;

return (
<SafeAreaProvider>
<StatusBar
translucent
barStyle={Platform.OS === 'ios' ? statusBarStyle : 'light-content'}
/>
<View style={styles.container}>
<SafeAreaView
edges={['top']}
style={[
styles.appbar,
backgroundColor ? { backgroundColor } : null,
appbarElevation
? { elevation: appbarElevation, borderBottomWidth }
: null,
]}
>
<View style={styles.appbarContent}>
{index > -1 ? (
<TouchableOpacity
style={styles.button}
onPress={handleNavigateBack}
>
{index > -1
? EXAMPLE_COMPONENTS[index].title
: this.state.title}
</Text>
{index > -1 ? <View style={styles.button} /> : null}
</View>
</SafeAreaView>
<SafeAreaView edges={['bottom']} style={styles.safearea}>
<View style={styles.content}>
{index === -1 ? (
<ScrollView>
{EXAMPLE_COMPONENTS.map(this.renderItem)}
</ScrollView>
) : ExampleComponent ? (
<ExampleComponent />
) : null}
</View>
</SafeAreaView>
</View>
</SafeAreaProvider>
);
}
}
<Ionicons
name={
Platform.OS === 'android'
? 'md-arrow-back'
: 'ios-arrow-back'
}
size={24}
color={tintColor}
/>
</TouchableOpacity>
) : null}
<Text
style={[styles.title, tintColor ? { color: tintColor } : null]}
>
{index > -1 ? EXAMPLE_COMPONENTS[index].title : 'Examples'}
</Text>
{index > -1 ? <View style={styles.button} /> : null}
</View>
</SafeAreaView>
<SafeAreaView edges={['bottom']} style={styles.safearea}>
<View style={styles.content}>
{index === -1 ? (
<ScrollView>{EXAMPLE_COMPONENTS.map(renderItem)}</ScrollView>
) : ExampleComponent ? (
<ExampleComponent />
) : null}
</View>
</SafeAreaView>
</View>
</SafeAreaProvider>
);
};

const styles = StyleSheet.create({
container: {
Expand Down
68 changes: 30 additions & 38 deletions packages/react-native-tab-view/example/src/AutoWidthTabBarExample.tsx
View file
Expand Up @@ -17,33 +17,18 @@ type State = NavigationState<{
title: string;
}>;

export default class DynamicWidthTabBarExample extends React.Component<
{},
State
> {
// eslint-disable-next-line react/sort-comp
static title = 'Scrollable tab bar (auto width)';
static backgroundColor = '#3f51b5';
static appbarElevation = 0;
const AutoWidthTabBarExample = () => {
const [index, onIndexChange] = React.useState(1);
const [routes] = React.useState([
{ key: 'article', title: 'Article' },
{ key: 'contacts', title: 'Contacts' },
{ key: 'albums', title: 'Albums' },
{ key: 'chat', title: 'Chat' },
{ key: 'long', title: 'long long long title' },
{ key: 'medium', title: 'medium title' },
]);

state = {
index: 1,
routes: [
{ key: 'article', title: 'Article' },
{ key: 'contacts', title: 'Contacts' },
{ key: 'albums', title: 'Albums' },
{ key: 'chat', title: 'Chat' },
{ key: 'long', title: 'long long long title' },
{ key: 'medium', title: 'medium title' },
],
};

private handleIndexChange = (index: number) =>
this.setState({
index,
});

private renderTabBar = (
const renderTabBar = (
props: SceneRendererProps & { navigationState: State }
) => (
<TabBar
Expand All @@ -56,7 +41,7 @@ export default class DynamicWidthTabBarExample extends React.Component<
/>
);

private renderScene = SceneMap({
const renderScene = SceneMap({
albums: Albums,
contacts: Contacts,
article: Article,
Expand All @@ -65,17 +50,24 @@ export default class DynamicWidthTabBarExample extends React.Component<
medium: Article,
});

render() {
return (
<TabView
navigationState={this.state}
renderScene={this.renderScene}
renderTabBar={this.renderTabBar}
onIndexChange={this.handleIndexChange}
/>
);
}
}
return (
<TabView
navigationState={{
index,
routes,
}}
renderScene={renderScene}
renderTabBar={renderTabBar}
onIndexChange={onIndexChange}
/>
);
};

AutoWidthTabBarExample.title = 'Scrollable tab bar (auto width)';
AutoWidthTabBarExample.backgroundColor = '#3f51b5';
AutoWidthTabBarExample.appbarElevation = 0;

export default AutoWidthTabBarExample;

const styles = StyleSheet.create({
tabbar: {
Expand Down

0 comments on commit 302e682

Please sign in to comment.