I am using react-stomp for subscribing stomp connection but it is only working in debug mode
import SockJsClient from 'react-stomp';
<View>
<SockJsClient
url={STAMP_URL}
topics={stamp_topic}
onMessage={onMessageReceive} />
</View>
Related
If i click on Lungs Banks i want to move to another screen How can i do this
<KeyboardAvoidingWrapper>
<WelcomeStyledContainer>
<StatusBar style="dark" />
<OrganHeading>
<OrganHeadingText>Donate Able Organ</OrganHeadingText>
</OrganHeading>
<View style={styles.container}>
<View style={styles.Box}>
<View style={styles.inerBox}>
<CardStyle>
<CardImage source={require('./../assets/organImage/lungs.png')} />
<CardText>Lungs Bank</CardText>
</CardStyle>
</View>
</View>
Below solution will work for you if you are using React-navigation.
UI Screen:
<CardText onPress={()=>navigation.navigate("YOUR SCREEN NAME HERE")}>Lungs Bank</CardText>
Card Text Component:
const CardText = ({onPress}) => {
return <Text onPress={onPress}>{props.children}</Text>;
}
Thanks!
You can use react-navigation
library to get started with navigation in react-native.
<TouchableOpacity style={styles.arrowImgBlock} onPress={__need to enable hotspot__}>
<Image
source={require('./src/images/arrow.png')}
style={styles.arrowImg}
/>
</TouchableOpacity>
i am bit worried on how can we enable hotspot in react native onPress event?please anyone help me out on this?
I am trying to implement Highcharts organization chart in a React Native application, but could not find a perfect tutorial to start with. I tried Highcharts React Native wrapper but its is throwing errors. It will be highly informative if someone could find a perfect tutorial with is compatible with latest react native and expo versions.
I was also running into errors but I managed to fix them in the react-native-highcharts library. It is because the library uses webview as a component from the core react native which has been depreciated.
npmjs.com guide on highcharts
after installing and implementing all as described in the guide, install one more package by running the following command
npm install --save react-native-webview
after this, go to node_modules>react-native-highcharts>react-native-highcharts.js
in here, on the very start, find the import statements and remove WebView import from 'react-native' and add the following line after that.
import WebView from 'react-native-webview';
and now, go to the render method, here on the WebView element, you shall find a prop named 'onLayout={this.reRenderWebView}' like this
return (
<View style={this.props.style}>
<WebView
onLayout={this.reRenderWebView}
style={styles.full}
source={{ html: concatHTML, baseUrl: 'web/' }}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={true}
scrollEnabled={false}
automaticallyAdjustContentInsets={true}
{...this.props}
/>
</View>
Change it to
return (
<View style={this.props.style}>
<WebView
onLayout={this.reRenderWebView.bind(this)}
style={styles.full}
source={{ html: concatHTML, baseUrl: 'web/' }}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={true}
scrollEnabled={false}
automaticallyAdjustContentInsets={true}
{...this.props}
/>
</View>
Now run your app again and see if you still hit any bugs. I hope it fixes your issue
I've tried different methods to render an html content from json response to react native.But I got failed in these methods
https://www.npmjs.com/package/react-native-render-html
https://www.npmjs.com/package/react-native-htmlview
Because there is no package that support table tag of html. So I thought to use WebView in react native.But that also disappointed me. There is no field to give html content from json response in WebView. I've tried the following.
But these are not working
code
<WebView
source={{uri: `<h1>Hello World</h1>`}}
style={{marginTop: 20}}
/>
In my case I'm fetching server response.I've double checked whether response is coming ,the response from server is fine.
return (
<Container style={styles.container}>
<View>
{this.state.section.map(article =>
<View>
<WebView
source={{uri:article.data.description}}
style={{marginTop: 20}}
/>
</View>
)}
</View>
</Container>
);
Is there any other method for rendering html content other than these. Please I'm stuck with this.I don't know what to do.This cause delay in my project.So I'm really disappointed.Please any help would be really appreciable.
I've solved the problem.I was using native-base ui kit.So when I tried to render WebView within Container or Content it won't render.So I removed it with View component but ScrollView don't work.So I've made some changes to Container and it is working perfect.But still remains a problem that border of html table is not displaying.But otherwise it is perfect
This is my working code
<Content contentContainerStyle={{ flex: 1 ,padding:15}}>
{this.state.section.map(article =>
<WebView
source={{ html: article.data.description}}
javaScriptEnabled={true}
style={{backgroundColor: 'transparent'}}
/>
)}
</Content>
React-native Android, when touchable component is put, such as TouchableOpacity in a scrollView/listView, it's very easy to get touch event when the scrollView/listView is scrolling. In react-native iOS, everything is fine. But in React Native Android, it's very annoying.
It's strange, no one ask this question before.
Has anyone seen this issue?
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
automaticallyAdjustContentInsets={false}
style={styles.listView}
/>
renderRow(rowData:rankRecord, sectionID:number, rowID:number) {
return(
<TouchableHighlight
style={{height:70}}
onPress={() => this.goToProfile(rowData.inner_id)}>
<RankCell rowData={rowData}/>
</TouchableHighlight>
);
}