forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Readd the FAB for composing new posts
+76
-11
+68
src/view/com/util/FAB.tsx
+68
src/view/com/util/FAB.tsx
···
1
+
import React from 'react'
2
+
import {observer} from 'mobx-react-lite'
3
+
import {
4
+
GestureResponderEvent,
5
+
StyleSheet,
6
+
TouchableWithoutFeedback,
7
+
View,
8
+
} from 'react-native'
9
+
import LinearGradient from 'react-native-linear-gradient'
10
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
11
+
import {IconProp} from '@fortawesome/fontawesome-svg-core'
12
+
import {colors, gradients} from '../../lib/styles'
13
+
import {useStores} from '../../../state'
14
+
15
+
type OnPress = ((event: GestureResponderEvent) => void) | undefined
16
+
export const FAB = observer(
17
+
({icon, onPress}: {icon: IconProp; onPress: OnPress}) => {
18
+
const store = useStores()
19
+
return (
20
+
<TouchableWithoutFeedback onPress={onPress}>
21
+
<View
22
+
style={[
23
+
styles.outer,
24
+
store.shell.minimalShellMode ? styles.lower : undefined,
25
+
]}>
26
+
<LinearGradient
27
+
colors={[gradients.purple.start, gradients.purple.end]}
28
+
start={{x: 0, y: 0}}
29
+
end={{x: 1, y: 1}}
30
+
style={styles.inner}>
31
+
<FontAwesomeIcon
32
+
size={24}
33
+
icon={icon}
34
+
color={colors.white}
35
+
style={styles.icon}
36
+
/>
37
+
</LinearGradient>
38
+
</View>
39
+
</TouchableWithoutFeedback>
40
+
)
41
+
},
42
+
)
43
+
44
+
const styles = StyleSheet.create({
45
+
outer: {
46
+
position: 'absolute',
47
+
zIndex: 1,
48
+
right: 22,
49
+
bottom: 84,
50
+
width: 60,
51
+
height: 60,
52
+
borderRadius: 30,
53
+
shadowColor: '#000',
54
+
shadowOpacity: 0.3,
55
+
shadowOffset: {width: 0, height: 1},
56
+
},
57
+
lower: {
58
+
bottom: 34,
59
+
},
60
+
inner: {
61
+
width: 60,
62
+
height: 60,
63
+
borderRadius: 30,
64
+
justifyContent: 'center',
65
+
alignItems: 'center',
66
+
},
67
+
icon: {},
68
+
})
-11
src/view/com/util/ViewHeader.tsx
-11
src/view/com/util/ViewHeader.tsx
···
21
21
title,
22
22
subtitle,
23
23
canGoBack,
24
-
onPost,
25
24
}: {
26
25
title: string
27
26
subtitle?: string
28
27
canGoBack?: boolean
29
-
onPost?: () => void
30
28
}) {
31
29
const theme = useTheme()
32
30
const pal = usePalette('default')
···
36
34
}
37
35
const onPressMenu = () => {
38
36
store.shell.setMainMenuOpen(true)
39
-
}
40
-
const onPressCompose = () => {
41
-
store.shell.openComposer({onPost})
42
37
}
43
38
const onPressSearch = () => {
44
39
store.nav.navigate(`/search`)
···
85
80
</Text>
86
81
) : undefined}
87
82
</View>
88
-
<TouchableOpacity
89
-
onPress={onPressCompose}
90
-
hitSlop={HITSLOP}
91
-
style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
92
-
<FontAwesomeIcon size={18} icon="plus" style={pal.text} />
93
-
</TouchableOpacity>
94
83
<TouchableOpacity
95
84
onPress={onPressSearch}
96
85
hitSlop={HITSLOP}
+2
src/view/screens/Home.tsx
+2
src/view/screens/Home.tsx
···
7
7
import {ViewHeader} from '../com/util/ViewHeader'
8
8
import {Feed} from '../com/posts/Feed'
9
9
import {Text} from '../com/util/text/Text'
10
+
import {FAB} from '../com/util/FAB'
10
11
import {useStores} from '../../state'
11
12
import {ScreenParams} from '../routes'
12
13
import {s, colors} from '../lib/styles'
···
103
104
<Text style={styles.loadLatestText}>Load new posts</Text>
104
105
</TouchableOpacity>
105
106
) : undefined}
107
+
<FAB icon="pen-nib" onPress={onPressCompose} />
106
108
</View>
107
109
)
108
110
})
+6
src/view/screens/Profile.tsx
+6
src/view/screens/Profile.tsx
···
18
18
import {Text} from '../com/util/text/Text'
19
19
import {ViewHeader} from '../com/util/ViewHeader'
20
20
import * as Toast from '../com/util/Toast'
21
+
import {FAB} from '../com/util/FAB'
21
22
import {s, colors} from '../lib/styles'
22
23
import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
23
24
···
87
88
},
88
89
),
89
90
)
91
+
}
92
+
93
+
const onPressCompose = () => {
94
+
store.shell.openComposer({})
90
95
}
91
96
92
97
// rendering
···
263
268
) : (
264
269
renderHeader()
265
270
)}
271
+
<FAB icon="pen-nib" onPress={onPressCompose} />
266
272
</View>
267
273
)
268
274
})