Skip to content

Instantly share code, notes, and snippets.

@ozcanzaferayan
Created January 26, 2020 12:12
Show Gist options
  • Save ozcanzaferayan/4708a2c5de50e5d203372c6c90e3c5ab to your computer and use it in GitHub Desktop.
Save ozcanzaferayan/4708a2c5de50e5d203372c6c90e3c5ab to your computer and use it in GitHub Desktop.
import React from 'react';
import { View, StyleSheet, Image, TouchableOpacity, Text, } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import images from 'res/images';
import palette from 'res/palette';
import AddPostScreen from './AddPostScreen';
import colors from 'res/colors';
const AddPostNavigator = createStackNavigator({
Home: {
screen: AddPostScreen,
navigationOptions: ({ navigation }) => ({
...palette.header,
headerLeft: () => (
<View style={styles.headerLeftContainer}>
<Image style={styles.headerLeftImage} source={images.close} />
<Text style={styles.headerLeftText}>Galeri</Text>
</View>
),
headerRight: () => (
<View style={styles.headerRightContainer}>
<TouchableOpacity onPress={() => navigation.navigate('Info')}>
<Text style={styles.headerLeftText}>İleri</Text>
</TouchableOpacity>
</View>
),
})
}
});
const styles = StyleSheet.create({
headerLeftContainer: { ...palette.header.headerLeftContainer },
headerLeftImage: { ...palette.header.image },
headerRightContainer: { ...palette.header.headerRightContainer },
headerRightImage: { ...palette.header.image },
headerRightText: { color: colors.storyAdd, marginLeft: 10, fontSize: 18 },
headerLeftText: { color: colors.textFaded1, marginLeft: 10, fontSize: 18 },
});
export default AddPostNavigator;
import React from 'react';
import { Image, TouchableOpacity, FlatList, } from 'react-native';
import colors from 'res/colors';
const AddPostScreen = () => {
const dataSource = [ { key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' }, { key: '6' }, { key: '7' }, { key: '8' }, { key: '9' }, { key: '10' }, { key: '11' }, { key: '12' }, { key: '13' }, { key: '14' }, ];
renderItem = () => {
return (
<TouchableOpacity
onPress={() => console.log("test")}
style={{ flex: 1, aspectRatio: 1 }}>
<Image style={{ flex: 1 }} resizeMode='cover' source={{ uri: 'https://picsum.photos/512' }}></Image>
</TouchableOpacity>
);
}
return (
<FlatList
style={{ flex: 1, backgroundColor: colors.background }}
data={dataSource}
renderItem={this.renderItem}
keyExtractor={(item) => item.key}
numColumns={4}
ListHeaderComponent={() =>
<TouchableOpacity style={{ flex: 1, aspectRatio: 1 }}>
<Image style={{ flex: 1 }} resizeMode='cover' source={{ uri: 'https://picsum.photos/512' }}></Image>
</TouchableOpacity>
}
/>
);
};
export default AddPostScreen;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment