diff --git a/client/react-native/common/components/App.js b/client/react-native/common/components/App.js
index 6b127ff874..5dc33fc1f7 100644
--- a/client/react-native/common/components/App.js
+++ b/client/react-native/common/components/App.js
@@ -1,5 +1,5 @@
import { I18nextProvider } from 'react-i18next'
-import { Linking, Platform } from 'react-native'
+import { Linking, Platform, View } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import Config from 'react-native-config'
import FlashMessage from 'react-native-flash-message'
@@ -8,9 +8,9 @@ import React, { PureComponent } from 'react'
import ReactNativeLanguages from 'react-native-languages'
import { BASE_WEBSITE_URL, colors } from './../constants'
-import { Flex, Animation } from './Library'
import { contact, conversation } from '../utils'
import { parse as parseUrl } from '../helpers/url'
+import { Flex, Animation, MovableView, DebugStateBar } from './Library'
import Accounts from './Screens/Accounts'
import Instabug from '../helpers/Instabug'
import i18n from '../i18n'
@@ -149,10 +149,18 @@ export default class App extends PureComponent {
deepLink,
setDeepLink: deepLink => this.setDeepLink(deepLink),
clearDeepLink: () => this.clearDeepLink(),
+ onRelayContextCreated: context => this.setState({
+ debugBar: ,
+ }),
}}
/>
) : null}
+
+
+ {this.state.debugBar}
+
+
{Platform.OS === 'ios' && }
diff --git a/client/react-native/common/components/Library/DebugStateBar.js b/client/react-native/common/components/Library/DebugStateBar.js
new file mode 100644
index 0000000000..b9ce1c26e4
--- /dev/null
+++ b/client/react-native/common/components/Library/DebugStateBar.js
@@ -0,0 +1,257 @@
+import React, { PureComponent } from 'react'
+import { colors } from '../../constants'
+import { promiseWithTimeout } from 'react-relay-network-modern/es/middlewares/retry'
+import { Flex, Text } from './index'
+import { View } from 'react-native'
+import RelayContext from '../../relay/RelayContext'
+import Icon from './Icon'
+import NavigationService from '../../helpers/NavigationService'
+
+const daemonStateValues = {
+ 'down': 0,
+ 'connecting': 1,
+ 'connected': 2,
+}
+
+class DebugStateBar extends PureComponent {
+ constructor (props) {
+ super(props)
+ this.state = {
+ watchTime: 10000,
+ listenAddrs: [],
+ listenInterfaceAddrs: [],
+ timeouted: false,
+ requestTimeout: 3000,
+ listenAddrTimer: null,
+ InterfaceAddrTimer: null,
+ bertyColor: colors.lightGrey,
+ bleColor: colors.lightGrey,
+ bgBertyColor: colors.inputGrey,
+ bgBleColor: colors.inputGrey,
+ bleText: 'off',
+ bleState: false,
+ bertyText: 'no daemon',
+
+ daemonState: daemonStateValues.down,
+ peers: [],
+ compact: true,
+ }
+ }
+
+ componentDidMount () {
+ this.fetchListenAddrs()
+ this.fetchListenInterfaceAddrs()
+
+ this.fetchPeers()
+ this.subscriber = this.props.context.subscriptions.monitorPeers.subscribe(
+ {
+ iterator: undefined,
+ updater: (store, data) => {
+ const peer = data.MonitorPeers
+ this.addPeer(peer)
+ },
+ }
+ )
+ }
+
+ componentWillUnmount () {
+ const { listenAddrTimer, InterfaceAddrTimer } = this.state
+
+ if (listenAddrTimer !== null) {
+ clearTimeout(listenAddrTimer)
+ }
+
+ if (InterfaceAddrTimer !== null) {
+ clearTimeout(InterfaceAddrTimer)
+ }
+
+ this.subscriber.unsubscribe()
+ }
+
+ timeoutPromise = () => {
+ return new Promise((resolve, reject) => {
+ this.setState({ timeouted: true }, this.setColor)
+ reject(new Error('Request timed out'))
+ })
+ }
+
+ addPeer = (peer) => {
+ this.setState(prevState => ({
+ peers: [...prevState.peers.filter(p => p.id !== peer.id), peer],
+ }))
+ }
+
+ fetchPeers = () => {
+ this.props.context.queries.Peers.fetch().then(data =>
+ this.setState({ peers: data.list })
+ )
+ }
+
+ fetchListenAddrs = () => {
+ const { context } = this.props
+ const { watchTime, requestTimeout, timeouted } = this.state
+
+ promiseWithTimeout(context.queries.GetListenAddrs.fetch(), requestTimeout, this.timeoutPromise).then(e => {
+ const timer = setTimeout(this.fetchListenAddrs, watchTime)
+
+ // if we previously timeouted we need to refetch peers
+ if (timeouted === true) {
+ this.fetchPeers()
+ }
+
+ this.setState({
+ listenAddrs: e.addrs,
+ timeouted: false,
+ listenAddrTimer: timer,
+ }, this.setColor)
+ }).catch(err => {
+ const timer = setTimeout(this.fetchListenAddrs, watchTime)
+ this.setState({
+ listenAddrTimer: timer,
+ peers: [],
+ timeouted: true,
+ listenAddrs: [],
+ })
+ console.log('err listen address', err)
+ })
+ }
+
+ fetchListenInterfaceAddrs = () => {
+ const { context } = this.props
+ const { watchTime, requestTimeout, timeouted } = this.state
+
+ promiseWithTimeout(context.queries.GetListenInterfaceAddrs.fetch(), requestTimeout, this.timeoutPromise).then(e => {
+ const timer = setTimeout(this.fetchListenInterfaceAddrs, watchTime)
+
+ // if we previously timeouted we need to refetch peers
+ if (timeouted === true) {
+ this.fetchPeers()
+ }
+
+ this.setState({
+ listenInterfaceAddrs: e.addrs,
+ timeouted: false,
+ InterfaceAddrTimer: timer,
+ }, this.setColor)
+ }).catch(err => {
+ const timer = setTimeout(this.fetchListenInterfaceAddrs, watchTime)
+ this.setState({
+ InterfaceAddrTimer: timer,
+ peers: [],
+ timeouted: true,
+ listenInterfaceAddrs: [],
+ }, this.setColor)
+ console.log('err Listen address', err)
+ })
+ }
+
+ setColor = () => {
+ const { listenAddrs, listenInterfaceAddrs, timeouted } = this.state
+ let bertyColor = colors.orange
+ let bgBertyColor = colors.orange25
+ let bertyText = 'connecting'
+ let daemonState = daemonStateValues.connecting
+ let bleColor = colors.lightGrey
+ let bgBleColor = colors.inputGrey
+ let bleText = 'off'
+ let bleState = false
+
+ if (listenAddrs.length > 0 && listenInterfaceAddrs.length > 0) {
+ listenInterfaceAddrs.forEach((v, i, arr) => {
+ try {
+ const splited = v.split('/')
+ if (splited[1] === 'ip4' && splited[2] !== '127.0.0.1') {
+ bertyColor = colors.green
+ bgBertyColor = colors.green25
+ bertyText = 'connected'
+ daemonState = daemonStateValues.connected
+ }
+ if (splited[1] === 'ble' && splited[2] !== '00000000-0000-0000-0000-000000000000') {
+ bleColor = colors.green
+ bgBleColor = colors.green25
+ bleText = 'on'
+ bleState = true
+ }
+ } catch (e) {
+ // Silence error since /p2p-circuit isn't valid
+ // console.log(e)
+ }
+ })
+ }
+
+ if (timeouted) {
+ bertyColor = colors.pink
+ bgBertyColor = colors.pink25
+ bertyText = 'no daemon'
+ daemonState = daemonStateValues.down
+ }
+ this.setState({
+ bertyColor,
+ bgBertyColor,
+ bertyText,
+ bleText,
+ bleState,
+ bleColor,
+ bgBleColor,
+ daemonState,
+ })
+ }
+
+ getPeersColor = (peers) => {
+ if (peers.length > 0) {
+ return {
+ bgPeerColor: colors.blue25,
+ peerColor: colors.blue,
+ }
+ }
+ return {
+ bgPeerColor: colors.inputGrey,
+ peerColor: colors.lightGrey,
+ }
+ }
+
+ render () {
+ const { bertyColor, bleColor, bleText, bertyText, peers, bgBertyColor, bgBleColor } = this.state
+ const { bgPeerColor, peerColor } = this.getPeersColor(peers)
+ const count = peers.reduce((acc, cur) => cur.connection === 1 ? acc + 1 : acc, 0)
+
+ return (
+
+
+
+
+
+ {
+ this.state.compact ? : bertyText.toLocaleUpperCase()
+ }
+
+
+ NavigationService.navigate('network/peers')}>{count.toString()}
+
+
+ NavigationService.navigate('network/config')}>{bleText.toLocaleUpperCase()}
+
+
+ NavigationService.navigate('settings/devtools')} />
+
+
+ )
+ }
+}
+
+const WrappedDebugStateBar = ({ context, ...props }) => {
+ if (context !== null) {
+ return
+ }
+
+ return
+ {context => }
+
+}
+
+export default WrappedDebugStateBar
diff --git a/client/react-native/common/components/Library/Header.js b/client/react-native/common/components/Library/Header.js
index 11439cbac0..9419662465 100644
--- a/client/react-native/common/components/Library/Header.js
+++ b/client/react-native/common/components/Library/Header.js
@@ -4,8 +4,6 @@ import { Button, Flex, Text, SearchBar } from '.'
import { colors } from '../../constants'
import { padding, borderBottom, paddingBottom } from '../../styles'
import { isRTL } from '../../i18n'
-import RelayContext from '../../relay/RelayContext'
-import { promiseWithTimeout } from 'react-relay-network-modern/es/middlewares/retry'
const [defaultTextColor, defaultBackColor] = [colors.black, colors.white]
@@ -13,188 +11,6 @@ const HeaderButton = ({ icon, color, style, ...otherProps }) => {
return
}
-class StateBadge extends PureComponent {
- constructor (props) {
- super(props)
- this.state = {
- watchTime: 10000,
- listenAddrs: [],
- listenInterfaceAddrs: [],
- timeouted: false,
- requestTimeout: 3000,
- listenAddrTimer: null,
- InterfaceAddrTimer: null,
- bertyColor: colors.lightGrey,
- bleColor: colors.lightGrey,
- bgBertyColor: colors.inputGrey,
- bgBleColor: colors.inputGrey,
- bleText: 'off',
- bertyText: 'no daemon',
- peers: [],
- }
- }
-
- componentDidMount () {
- this.fetchListenAddrs()
- this.fetchListenInterfaceAddrs()
-
- this.fetchPeers()
- this.subscriber = this.props.context.subscriptions.monitorPeers.subscribe(
- {
- iterator: undefined,
- updater: (store, data) => {
- const peer = data.MonitorPeers
- this.addPeer(peer)
- },
- }
- )
- }
-
- componentWillUnmount () {
- const { listenAddrTimer, InterfaceAddrTimer } = this.state
-
- if (listenAddrTimer !== null) {
- clearTimeout(listenAddrTimer)
- }
-
- if (InterfaceAddrTimer !== null) {
- clearTimeout(InterfaceAddrTimer)
- }
-
- this.subscriber.unsubscribe()
- }
-
- timeoutPromise = () => {
- return new Promise((resolve, reject) => {
- this.setState({ timeouted: true }, this.setColor)
- reject(new Error('Request timed out'))
- })
- }
-
- addPeer = (peer) => {
- this.setState(prevState => ({
- peers: [...prevState.peers.filter(p => p.id !== peer.id), peer],
- }))
- }
-
- fetchPeers = () => {
- this.props.context.queries.Peers.fetch().then(data =>
- this.setState({ peers: data.list })
- )
- }
-
- fetchListenAddrs = () => {
- const { context } = this.props
- const { watchTime, requestTimeout, timeouted } = this.state
-
- promiseWithTimeout(context.queries.GetListenAddrs.fetch(), requestTimeout, this.timeoutPromise).then(e => {
- const timer = setTimeout(this.fetchListenAddrs, watchTime)
-
- // if we previously timeouted we need to refetch peers
- if (timeouted === true) {
- this.fetchPeers()
- }
-
- this.setState({ listenAddrs: e.addrs, timeouted: false, listenAddrTimer: timer }, this.setColor)
- }).catch(err => {
- const timer = setTimeout(this.fetchListenAddrs, watchTime)
- this.setState({ listenAddrTimer: timer, peers: [], timeouted: true, listenAddrs: [] })
- console.log('err listen address', err)
- })
- }
-
- fetchListenInterfaceAddrs = () => {
- const { context } = this.props
- const { watchTime, requestTimeout, timeouted } = this.state
-
- promiseWithTimeout(context.queries.GetListenInterfaceAddrs.fetch(), requestTimeout, this.timeoutPromise).then(e => {
- const timer = setTimeout(this.fetchListenInterfaceAddrs, watchTime)
-
- // if we previously timeouted we need to refetch peers
- if (timeouted === true) {
- this.fetchPeers()
- }
-
- this.setState({ listenInterfaceAddrs: e.addrs, timeouted: false, InterfaceAddrTimer: timer }, this.setColor)
- }).catch(err => {
- const timer = setTimeout(this.fetchListenInterfaceAddrs, watchTime)
- this.setState({ InterfaceAddrTimer: timer, peers: [], timeouted: true, listenInterfaceAddrs: [] }, this.setColor)
- console.log('err Listen address', err)
- })
- }
-
- setColor = () => {
- const { listenAddrs, listenInterfaceAddrs, timeouted } = this.state
- let bertyColor = colors.orange
- let bgBertyColor = colors.orange25
- let bertyText = 'connecting'
- let bleColor = colors.lightGrey
- let bgBleColor = colors.inputGrey
- let bleText = 'off'
-
- if (listenAddrs.length > 0 && listenInterfaceAddrs.length > 0) {
- listenInterfaceAddrs.forEach((v, i, arr) => {
- try {
- const splited = v.split('/')
- if (splited[1] === 'ip4' && splited[2] !== '127.0.0.1') {
- bertyColor = colors.green
- bgBertyColor = colors.green25
- bertyText = 'connected'
- }
- if (splited[1] === 'ble' && splited[2] !== '00000000-0000-0000-0000-000000000000') {
- bleColor = colors.green
- bgBleColor = colors.green25
- bleText = 'on'
- }
- } catch (e) {
- // Silence error since /p2p-circuit isn't valid
- // console.log(e)
- }
- })
- }
-
- if (timeouted) {
- bertyColor = colors.pink
- bgBertyColor = colors.pink25
- bertyText = 'no daemon'
- }
- this.setState({ bertyColor, bgBertyColor, bertyText, bleText, bleColor, bgBleColor })
- }
-
- getPeersColor = (peers) => {
- if (peers.length > 0) {
- return {
- bgPeerColor: colors.blue25,
- peerColor: colors.blue,
- }
- }
- return {
- bgPeerColor: colors.inputGrey,
- peerColor: colors.lightGrey,
- }
- }
-
- render () {
- const { bertyColor, bleColor, bleText, bertyText, peers, bgBertyColor, bgBleColor } = this.state
- const { bgPeerColor, peerColor } = this.getPeersColor(peers)
- const count = peers.reduce((acc, cur) => cur.connection === 1 ? acc + 1 : acc, 0)
-
- return (
-
-
- {bertyText.toLocaleUpperCase()}
-
-
- {count.toString()}
-
-
- {bleText.toLocaleUpperCase()}
-
-
- )
- }
-}
-
export default class Header extends PureComponent {
render () {
const {
@@ -250,7 +66,7 @@ export default class Header extends PureComponent {
size={1}
justify='between'
align='center'
- style={[ searchBar ? paddingBottom : {} ]}
+ style={[searchBar ? paddingBottom : {}]}
>
{backBtn && (
{title}
-
-
- {context => }
-
-
{rightBtn ? {rightBtn} : null}
{!rightBtn &&
- rightBtnIcon !== null && (
+ rightBtnIcon !== null && (
!this.state.disabled,
+ onMoveShouldSetPanResponderCapture: () => !this.state.disabled,
+ onPanResponderGrant: () => {
+ this.state.pan.setOffset({
+ x: this.state.xOffset,
+ y: this.state.yOffset,
+ })
+ this.props.onDragStart()
+ },
+ onPanResponderMove:
+ Animated.event([null, {
+ dx: this.state.pan.x,
+ dy: this.state.pan.y,
+ }]),
+ onPanResponderRelease: (e, gestureState) => {
+ const xOffset = this.state.xOffset + gestureState.dx
+ const yOffset = this.state.yOffset + gestureState.dy
+ this.setState({ xOffset, yOffset })
+ this.props.onDragEnd()
+ },
+ })
+ }
+
+ componentWillMount () {
+ if (typeof this.props.onMove === 'function') {
+ this.state.pan.addListener((values) => this.props.onMove(values))
+ }
+ }
+
+ componentWillUnmount () {
+ this.state.pan.removeAllListeners()
+ }
+
+ changeDisableStatus = () => {
+ this.state.setState({
+ disabled: !this.state.disabled,
+ })
+ }
+
+ render () {
+ return (
+
+ {React.Children.map(this.props.children, child =>
+ React.cloneElement(child, { panHandlers: this.panResponder.panHandlers })
+ )}
+
+ )
+ }
+}
+
+MovableView.defaultProps = {
+ onDragStart: () => {},
+ onDragEnd: () => {},
+ disabled: false,
+}
diff --git a/client/react-native/common/components/Library/index.js b/client/react-native/common/components/Library/index.js
index 1010fb674c..6f1f3d7cce 100644
--- a/client/react-native/common/components/Library/index.js
+++ b/client/react-native/common/components/Library/index.js
@@ -20,3 +20,5 @@ export ContactIdentityActions from './ContactIdentityActions'
export SelfAvatarIcon from './SelfAvatarIcon'
export EmptyList from './EmptyList'
export Animation from './Animation'
+export MovableView from './MovableView'
+export DebugStateBar from './DebugStateBar'
diff --git a/client/react-native/common/components/Screens/Accounts/Current.js b/client/react-native/common/components/Screens/Accounts/Current.js
index 35e8d46ee2..23e5f44277 100644
--- a/client/react-native/common/components/Screens/Accounts/Current.js
+++ b/client/react-native/common/components/Screens/Accounts/Current.js
@@ -58,6 +58,8 @@ class Current extends PureComponent {
this.openDeepLink()
}
)
+
+ this.props.screenProps.onRelayContextCreated(context)
}
async componentDidUpdate (nextProps) {
diff --git a/client/react-native/package.json b/client/react-native/package.json
index 9ab9051973..86118dd68c 100644
--- a/client/react-native/package.json
+++ b/client/react-native/package.json
@@ -37,7 +37,6 @@
"react-native-config": "^0.11.7",
"react-native-dev-menu": "^2.0.1",
"react-native-device-info": "^0.24.3",
- "react-native-elements": "^1.0.0-beta7",
"react-native-exception-handler": "^2.10.2",
"react-native-flash-message": "^0.1.10",
"react-native-image-picker": "^0.27.1",
diff --git a/client/react-native/yarn.lock b/client/react-native/yarn.lock
index 7c067774f6..fd9ce75c72 100644
--- a/client/react-native/yarn.lock
+++ b/client/react-native/yarn.lock
@@ -3871,7 +3871,7 @@ lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-lodash.merge@^4.6.0, lodash.merge@^4.6.1:
+lodash.merge@^4.6.0:
version "4.6.1"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
@@ -3891,10 +3891,6 @@ lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-lodash.times@^4.3.2:
- version "4.3.2"
- resolved "https://registry.yarnpkg.com/lodash.times/-/lodash.times-4.3.2.tgz#3e1f2565c431754d54ab57f2ed1741939285ca1d"
-
lodash.unescape@4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -4652,10 +4648,6 @@ onetime@^2.0.0:
dependencies:
mimic-fn "^1.0.0"
-opencollective-postinstall@^2.0.0:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.1.tgz#798e83e168f7b91949061c2683f762af747f17cc"
-
opn@^3.0.2:
version "3.0.3"
resolved "http://registry.npmjs.org/opn/-/opn-3.0.3.tgz#b6d99e7399f78d65c3baaffef1fb288e9b85243a"
@@ -5199,15 +5191,6 @@ react-native-drawer-layout@1.3.2:
dependencies:
react-native-dismiss-keyboard "1.0.0"
-react-native-elements@^1.0.0-beta7:
- version "1.0.0-beta7"
- resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-1.0.0-beta7.tgz#d732affc905079033a8b53343587f7c1dbc59834"
- dependencies:
- lodash.merge "^4.6.1"
- lodash.times "^4.3.2"
- opencollective-postinstall "^2.0.0"
- prop-types "^15.5.8"
-
react-native-exception-handler@^2.10.2:
version "2.10.2"
resolved "https://registry.yarnpkg.com/react-native-exception-handler/-/react-native-exception-handler-2.10.2.tgz#c500f7713fd30e79f44b03b223cf9ea90facae89"