brandon.presley/Swiper
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Make pick button centered

Browse Source
This commit is contained in:
Brandon Presley 2022-12-18 20:01:00 +13:00
parent 73c1dc3c2b
commit c4b2d5eeed
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
App.tsx
View File

@ -7,6 +7,8 @@ import DocumentPicker, {
import Video from 'react-native-video' import Video from 'react-native-video'
import {backgroundColor} from './constants' import {backgroundColor} from './constants'
const buttonWidth = '45%'
export default function App() { export default function App() {
const [files, setFiles] = useState<DocumentPickerResponse[]>([]) const [files, setFiles] = useState<DocumentPickerResponse[]>([])
const [selected, setSelected] = useState(0) const [selected, setSelected] = useState(0)
@ -38,7 +40,8 @@ export default function App() {
<View <View
style={{ style={{
backgroundColor, backgroundColor,
justifyContent: 'space-between', justifyContent: 'center',
alignItems: 'center',
flex: 1, flex: 1,
flexGrow: 1, flexGrow: 1,
padding: 10, padding: 10,
@ -63,26 +66,28 @@ export default function App() {
<Text <Text
style={{ style={{
color: 'white', color: 'white',
marginTop: 10, margin: 10,
}}> }}>
{files[selected].name} ({selected + 1}/ {files.length}) {files[selected].name} ({selected + 1}/ {files.length})
</Text> </Text>
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={{width: buttonWidth, marginRight: 10}}>
<Button title="Prev" disabled={selected <= 0} onPress={prev} />
</View>
<View style={{width: buttonWidth}}>
<Button
title="Next"
disabled={selected >= files.length - 1}
onPress={next}
/>
</View>
</View>
</View> </View>
) : ( ) : (
<Button title="Pick" onPress={pick} /> <View style={{width: buttonWidth}}>
<Button title="Pick" onPress={pick} />
</View>
)} )}
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={{width: '45%'}}>
<Button title="Prev" disabled={selected <= 0} onPress={prev} />
</View>
<View style={{width: '45%'}}>
<Button
title="Next"
disabled={selected >= files.length - 1}
onPress={next}
/>
</View>
</View>
</View> </View>
) )
} }