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
Related
i used webview to display some web pages in my expo app like the code bellow :
<WebView
style={styles.container}
originWhitelist={['*']}
source={{ html: '<h1><center>Hello world</center></h1>' }}
/>
it works coorectly on some android phones and not show images on some others phones .
help please .
What am I trying to achieve
I am currently facing a styling issue at the TextInput from react-native.
What I am trying to achieve is to display an icon within the TextInput.
Current situation
Creating a TextInput with the following code.
<TextInput
placeholder={translationStrings.searchPlaceHolder}
style={styles.searchStyling}
/>
This looks like below:
Current situation
What am I trying to achieve:
Wished situation
Does someone have any idea how to do this?
This is how ive achieved it
searchBar = () => {
return (
<View style={{ flexDirection:'row' , alignItems:'center'}}>
<TextInput
placeholder="Search your issues "
keyboardShouldPersistTaps
onChangeText={text => this.props.chnageInputText(text.toLowerCase())}
/>
<Image
style={faqStyles.imT}
source={require('../assets/images/maglass1.png')}
/>
</View>
);
};
This is how ive made a custom searchbar by wrapping an image and textInput in a View >ill always prefer using custom made components rather than libraries external. Try this and hope it helps. feel free for doubts.
Please see the below image, this is what ive achieved. ive reversed the elemnts like text input and magnifying glass image for you.
import {Item,Input} from 'native-base'
<Item>
<Input>
</Input>
<TouchableOpacity>
<Icon></Icon>
</TouchableOpacity>
</Item>
using native-base use input instead of textInput.
Otherwise just use a view with flexDirection:'row'
I want to create a box of Terms and conditions in which data can be scrolled. I tried it using TextInput like below but it doesn't scrolls.
<TextInput
multiline={true}
value={data}
editable={false}
scrollEnabled={true}
style={styles.termsAndConditionsStyle}
/>
second alternative
I also tried it this way, it works but it gives me a yellow screen warning which says - You are binding a method component to the component. React does this for you automatically in a high performance way, so you can safely remove this call. See ScrollView.
<ScrollView style={styles.termsAndConditionsStyle}>
<Text>
// some large text
</Text>
</ScrollView>
Solution - Actually I imported ScrollView from react-native-gesture-handler instead of react-native
Did you try <ScrollView>?.
You can use this to create scrolling functionality.
well its pretty simple, just warp your components in <ScrollView> ... </ScrollView>and
style it as per your need.
if height of components together exceeds for <ScrollView>, it becomes scrollable.
see docs at react native
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
render() {
return(
<View style={styles.container}>
<ScrollView>
<Text>
Add your text
</Text>
</ScrollView>
</View>
);
}
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
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>
);
}