I have set modal visibility to false but it still showing. I cant figure out what causes this issue. Maybe somebody had this problem before ?
export default class Controls extends Component {
constructor(props) {
super();
this.state = {
modalVisible: false,
}
}
render() {
return (
<Modal
animationType={'slide'}
modalVisible={this.state.modalVisible}
>
</Modal>
);
}
}
The prop that controls the visibility of the modal is visible and not modalVisible.
Hence the correct code would be:
export default class Controls extends Component {
constructor(props) {
super();
this.state = {
modalVisible: false,
}
}
render() {
return (
<Modal
animationType={'slide'}
visible={this.state.modalVisible}
>
</Modal>
);
}
}
Related
I have tried many ways but non of these worked. I am trying from 5 days.
I used redux,props,then ref . Non of these helped.
I need the modal to be visible when I call it from another class.
// this is the parent class
export default class Search1 extends React.Component {
constructor(props) {
super(props);
this.setModalVisible1 = this.setModalVisible1.bind(this);
this.state = {
modalVisible1: false,
};
this.closeModal = this.closeModal.bind(this);
}
setModalVisible1(visible) {
this.setState({ modalVisible1: visible });
// this.setModalVisible2(visible);
}
closeModal() {
console.log("modalvi1 value is in closemodal ", this.state.modalVisible1);
this.setState({ modalVisible1: false });
}
render() {
return (
{/* it renders the screen again when I call the */}
<Modal
closeModal={() => this.closeModal}
animationType="slide"
transparent={true}
visible={this.state.modalVisible1}
</Modal>
<NavStack />
);
}
}
// this is the child class
class HomeScreen extends React.Component {
render() {
<TouchableOpacity
style={styles.firstStyle}
onPress={() => {
this.props.closeModal();
);
}}
>
return (
}
The modal should be visible when called from outer child class. It needs to be close when called from the parent class.
I tried using redux. that does not worked. Then I used props. Then I used the ref. None of these helped. Just get tired of this. Help me out of this.
Pass the function to modal
closeModal() {
this.setState({ modalVisible1: false });;
}
<Modal
closeModal={this.closeModal}
animationType="slide"
transparent={true}
visible={this.state.modalVisible1} />
and run it on child component as this.props.closeModal()
I`m creating an React App to display device Info. I want to render Screen Brightness level, not in Console. How do I do it?
DeviceBrightness.getSystemBrightnessLevel().then(function(luminous) {
console.log(luminous)
})
I expected to render the screen brightness level, not to display in console
import DeviceBrightness from 'react-native-device-brightness';
export default class App extends Component{
constructor(props){
super(props);
this.state = {
isLoaded: false,
brightness: 0,
};
}
componentWillMount() {
DeviceBrightness.getSystemBrightnessLevel()
.then((luminous) =>{
this.setState({
brightness: luminous,
isLoaded: true,
});
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.instructions}>{this.state.brightness}</Text>
</View>
);
}
}
import DeviceBrightness from 'react-native-device-brightness';
export default class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoaded: false,
brightness: 0
};
}
componentDidMount() {
DeviceBrightness.getSystemBrightnessLevel()
.then(luminous => {
this.setState({
brightness: luminous,
isLoaded: true,
});
});
}
render() {
const { isLoaded, brightness } = this.state;
if (!isLoaded) {
return {/*loading view*/}
} else {
return (
<Text>{brightness}</Text>
);
}
}
}
i want to pass my params value in my custom component so below is my code
Header.js
class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View >
<Text >Title</Text>
<Text>subtitle</Text>
</View>
);
}
}
I call my Header.js from my main.js
class Main extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Header title = {this.props.navigation.state.params.screen_title} subtitle= {this.props.navigation.state.params.subtitle} />
);
}
}
I pass my title and subtitle in my header component , i just wanted to know how can i access my passing variable value in my header component ? your all suggestions are appreciable
Its very simple You can access it by
this.props.title
this.props.subTitle
this.props.nameOfTheProps
I've been struggling passing a value from one component to another. It's a continuation of the issue from a previous question which was partially resolved: react-native tab navigator search box
I'm using tab navigator and here's my app setup:
index.js (renders tab setup)
router.js
searchHeader.js
tab1.js
tab2.js
etc
In index.js when a tab is changed I'm getting the name of the tab. I want to pass that to searchHeader.js to update the placeholder text.
As searchHeader.js isn't imported into index.js and not a direct child how do I pass it that value?
index.js
import React, { Component } from 'react';
import { Root, Tabs } from './config/router';
import { Alert,View } from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = {
searchText: '',
}
}
_getCurrentRouteName(navState) {
if (navState.hasOwnProperty('index')) {
this._getCurrentRouteName(navState.routes[navState.index])
} else {
if (navState.routeName==='One') {
this.setState({searchText:'Search One'})
}
if (navState.routeName==='Two') {
this.setState({searchText:'Search Two'})
}
if (navState.routeName==='Three') {
this.setState({searchText:'Search Three'})
}
if (navState.routeName==='Four') {
this.setState({searchText:'Search Four'})
}
}
}
render() {
return (
<Root onNavigationStateChange={(prevState, newState) => {
this._getCurrentRouteName(newState)
}} />
)
}
}
export default App;
router.js
...
export const Root = StackNavigator({
Tabs: {
screen: Tabs,
navigationOptions: {
header: <SearchHeader data={'Test'} />
}
},
}, {
mode: 'modal',
});
searchHeader.js
import React, { Component } from 'react';
import { View,Text,Dimensions,Alert } from 'react-native';
import { SearchBar } from 'react-native-elements';
class SearchHeader extends Component {
constructor(props) {
super(props);
this.state = {
placeholder: "Search One"
}
}
render() {
return (
<SearchBar
noIcon
containerStyle={{backgroundColor:'#fff'}}
inputStyle={{backgroundColor:'#e3e3e3',}}
lightTheme = {true}
round = {true}
placeholder={data}
placeholderTextColor = '#000'
/>
);
}
};
export default SearchHeader;
You could perhaps pass it as a navigation prop using the setParams method.
An alternative, depending on the scope of your app, would be to look at a state library such as Redux or MobX - but if it's a small app, it's overkill
For that you can use Redux, you will have a store where you can put shared properties and values,
Then your components can connect to that store and bind its props with the chosen reducer(s) and dispatch actions..
this structure may work:
class Home extends Component {
func(val) {
this.setState({value: val});
}
render() {
return (
<View>
<Two func={(val) => this.func(val)} />
</View>
)
}
}
class Two extends Component {
render() {
return (
<View>
<Button title="set" onPress={() => this.props.func('data')} />
</View>
)
}
}
I'd like to, in my router on renderScene, be able to have a property of scenes/components etc. to hide the Navigator bar.
Unfortunately, I can't modify the state of the navigationbar, and have a re-render fire with conditions. I guess that's because of the way it's set?
export default class Root extends React.Component {
render(){
return (
<Navigator
initialRoute={Routes.SubdomainScreen}
renderScene={Router.renderScene}
configureScene={Router.configureScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
/>
}
style={styles.container}
/>
)
}
}
Ideally, in my router, some components with have navigationbar set to false, and I will then update the style of the navigator to {opacity:0}. When/where would someone accomplish this?
You can use your route definitions and add a hideNavBar property to it, then track it with state.
export default class Root extends React.Component {
constructor(props) {
super(props);
this.state = {
hideNavBar: false,
};
}
render(){
let navBar = null;
if (! this.state.hideNavBar) {
navBar = (
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
/>
);
}
return (
<Navigator
initialRoute={Routes.SubdomainScreen}
renderScene={Router.renderScene}
configureScene={Router.configureScene}
onWillFocus={this.onNavWillFocus.bind(this)}
navigationBar={navBar}
style={styles.container}
/>
)
}
onNavWillFocus(route) {
if (route.hideNavBar !== undefined && this.state.hideNavBar !== route.hideNavBar) {
this.setState({hideNavBar: route.hideNavBar});
}
}
}