How do I know what native props are available for a component to use setNativeProps. In this example, the <TextInput> component doesn't have text as a prop but apparently setNativeProps use text instead of value as a prop. Thank you!
clearText = () => {
this._textInput.setNativeProps({text: ''});
}
render() {
return (
<View style={{flex: 1}}>
<TextInput
ref={component => this._textInput = component}
/>
<TouchableOpacity onPress={this.clearText}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
}
This is pretty common in react-native, due to limited documentation. Whenever looking for any information regarding react-native components, it is a good idea to simply look at the .js file you are using. In this case, TextInput, can be found...
Project/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
Hope you can find what you're looking for - with a bit of digging. If you want to look further, looking into the RCT files is a good idea also.
Project/node_modules/react-native/Libraries/Text/RCTTextField.h
Project/node_modules/react-native/Libraries/Text/RCTTextView.h
Related
I created a native module using Swift called CounterView, and when I use it as such:
<CounterView style={{flex: 1}} />
I get this nasty warning! But the thing is, everything works. The error goes away if I remove the style prop, but nothing would render without the {flex: 1}. So I tried to wrap this inside a View, but then it renders relative to the entire screen rather than the wrapper. How can I get rid of this error? Am I doing something wrong to make my component "read-only"?
Type '{ style: { flex: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, {}, any> & Readonly<NativeMethods>> & Readonly<...> & Readonly<...>'.
Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, {}, any> & Readonly<NativeMethods>> & Readonly<...> & Readonly<...>'.
I can circumvent the issue if I do this:
<View style={{flex: 1}}>
<View style={{flex: 1}} />
<View style={{flex: 1}}>
<CounterView />
</View>
</View>
This takes care of the other half of the screen that will be occupied by another flex:1 container, but this looks pretty silly.
I want to use react-native-paper dark theme on my apps, however, all my <View> are still had a white background and causing all the Text component unreadable because the text turns white in dark mode. I didn't use custom theming since the docs mention that:
If you don't use a custom theme, Paper will automatically turn animations on/off, depending on device settings.
This is my code in App.js:
import React from 'react';
import {Provider as PaperProvider} from 'react-native-paper';
import Home from './src/Home';
const App = () => {
return (
<PaperProvider>
<Home />
</PaperProvider>
);
};
export default App;
This is in my Home.js:
import React from 'react';
import {View} from 'react-native';
import {Appbar, Card, Title} from 'react-native-paper';
const Home = () => {
return (
<View style={{flex: 1}}>
<Appbar.Header>
<Appbar.BackAction onPress={() => console.log('back')} />
<Appbar.Content title="Title" subtitle={'Subtitle'} />
</Appbar.Header>
<View>
<Title>Hello World</Title>
<Card
style={{margin: 15, padding: 15}}
onPress={() => console.log('press card')}>
<Title>This is Card</Title>
</Card>
</View>
</View>
);
};
export default Home;
and this is the result:
The view still white and the Title also white due to dark mode
It working fine on android
The text turns white because it is the behavior of dark mode, but why my <View> is still white? This is only happening on iOS, it works fine on android.
This is a new react native project, and based on documentation in react-native-paper it will turn the dark theme automatically. So, I need help if I missed something in setting up this project on iOS. Any help would be appreciated.
react: 16.13.1
react-native: 0.63.4
react-native-paper: ^4.7.1
react-native-vector-icons: ^8.0.0
If you do not specify a custom theme, Paper will use the DefaultTheme which is essentially a light theme. To employ a dark theme in your app, Paper provides a Material based DarkTheme. You can specify which theme to use within the Paper provider.
Complete example from the docs for DefaultTheme including customization:
import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#3498db',
accent: '#f1c40f',
},
};
export default function Main() {
return (
<PaperProvider theme={theme}>
<App />
</PaperProvider>
);
}
PaperProvider uses React Context. Theme can be accessed within components with the withTheme HOC or useTheme hook.
I am a newbie developer. I'm currently developing apps using React-Native on two platforms, Android and iOS.
I have several constraints when designing this app on the two platforms I use. This app is similar to chat. For the wrapping compiler I use Listview. But there are constraints when running on the iOS platform.
My code is as follows:
<View style={Styles.container}>
<View style={Styles.conversation}>
{this.messages.length > 0
? <ListView
enableEmptySections
style={Styles.messageList}
ref={ref => (this.listView = ref)}
onContentSizeChange={(contentWidth, contentHeight) => {
this.listView.scrollTo({
y: contentHeight,
});
}
}}
dataSource={ds.cloneWithRows(this.messages)}
renderRow={item => <Message data={item} key={item.key} />}
/>
: <Text style={Styles.welcome_message}>Welcome to Kelle</Text>}
</View>
The code above on Android goes well. But when it runs on iOS, the chat text position in the Listview becomes random. Like the picture below:
Has anyone ever experienced anything like this? How should I solve this problem?
I have researched quite a lot and tried to no avail to render a locally located webpage (with dynamic content based off of get vars in the url) to render in a webpage on android and ios with react native.
Firstly is this even possible?
and if its not possible is there any other cross platform mobile development technologies out there that can achieve this?
Thank you
Yes it's possible to load local html into the webview. You can pass the html via require to the webview's source property. There's an example in the docs:
render(): ReactElement<any> {
return (
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={require('./helloworld.html')}
scalesPageToFit={true}
/>
);
}
You can use the injectedJavaScript property to inject javascript containing your arguments in order to make the content dynamic.
render(): ReactElement<any> {
return (
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={require('./helloworld.html')}
scalesPageToFit={true}
injectedJavaScript="var a = 1;"
/>
);
}
I'm basically asking the same question as this one, but for RN 0.28+. The solutions presented in the various answers do not seem to work in RN 0.28, so I'm hoping there are other configurations or hacks...
Is there any way to resize a WebView based on the height of its content? I've tried injecting the document height into the title and reading that back with onNavigationStateChange, but it always returns 568 (similar to the comments to this gist).
return <TouchableHighlight onPress={() => console.log('touched ' + this.props.choice.id)}
style={styles.choiceRowWrapper} >
<View style={styles.choiceWebViewWrapper}>
<WebView automaticallyAdjustContentInsets={false}
javascriptEnabled={true}
onNavigationStateChange={(navState) => this._updateWebViewNavState(navState)}
scrollEnabled={false}
source={{html: WrapHTML(this.props.choice.text)}}
style={[styles.choiceWebView, {height: this.state.height}]} />
</View>
</TouchableHighlight>
}
_updateWebViewNavState = (navState) => {
console.log(navState);
if (navState.title) {
this.setState({ height: parseInt(navState.title) });
}
}
function WrapHTML (markup) {
return `<!DOCTYPE html>
<html>
<head>
</head>
<body class="content">
${markup}
</body>
<script>window.location.hash = 1;document.title = document.height;</script>
</html>`;
};
I have also tried various things inside of the WebView document, like:
document.scrollHeight.contentSize.height
document.body.height
But all of them are undefined. The closest I got was something like this (from this iOS SO question):
document.getElementById("content").offsetHeight;
But for short text content that returns 20, and for a longer text content (one full sentence) it returns 40...neither of which seems accurate.
I also started trying this RN component, but the repo indicates that it is not being actively maintained -- the latest version on npm doesn't support RN 0.28 because of the change they made for importing React by itself (instead of from ReactNative).
Has anyone gotten WebViews to resize properly with RN 0.28?
After a lot of research and tinkering, I found this approach which is a slightly more involved version of setting the document title to the screen height value. In my tests, this has worked on both Android and iOS with react native 0.47.
https://gist.github.com/xyos/dcaa43fa561760b9d6194d78e5fb7721