We Keep Coding

Global component in React Native Navigation

I want to create a music player app that has collapsed music player at the bottom of the screen, above the bottom tabs, similar to how Spotify and Apple Music have it. I just want to see how you would do a layout in that case. Any help is appreciated.

You can create custom tabs with additional view that displays the your player control. For example create CustomTabBar.js like following :
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class CustomTabBar extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<View style={{height: 50}}>
{/* Player controller view */}
</View>
{/* Custom Tab view */}
</View>
);
}
}
export default CustomTabBar;
Above component will contains the player controller and custom tabs. Now you can use it with createMaterialTopTabNavigator. For example :
const HomeTabNavigator = createMaterialTopTabNavigator({
Home: {
screen: HomeStackNavigator,
},
Search: {
screen: SearchStackNavigator
},
Library: {
screen: Library,
},
}, {
...,
...
tabBarComponent: (props) => <CustomTabBar {...props} />, // use your custom tab layout
...
...
},
});
Now, you player control will displays in all your page with tabs. However if you want to use animation effect like spotify or apple music then you have to use pan responder in your player controller view.

React Native pass one component to another component

Am new to the React world , so am facing issues with communications between the components. We have a 3 step login screen , and each screen has a top banner image and main background image , also few links in the footer .and the only difference is that in each screen we will have different form fields. lets say in the first screen we will have user name and a button , on the second screen some label and a text fields , and in the last screen we will have password fields and a image .
So what am planning is that i want to create a Index component with the common elements like i said the header logo, and the main image , and the footer . and i want to pass the components of the 3 screens into that so that Index will render the passed components , so if i pass the first component it should display the header logo , main image ,footer and the first screen component .
This is the first component which is calling Index and passing the LoginForm ,but its not rendering the passed LoginForm component, it just display the images of the Index component only.
How can i display the passed LoginForm within the Index component ?
import { LoginForm } from "./shared-components/LoginForm";
import { Index } from "./shared-components/Index";
export class Login extends Component {
constructor(prop) {
super(prop);
this.state = { username: "", password: "", result: [], isLoading: false };
}
render() {
return <Index passedForm={LoginForm} />;
}
}
This is the Index component
import React from "react";
import { Image, ImageBackground } from "react-native";
import { Container, Content, View } from "native-base";
export class Index extends React.Component {
constructor(prop) {
super(prop);
this.state = { username: "", password: "", result: [], isLoading: false };
}
render() {
return (
<Container>
<Content>
<Image
source={require("../assets/finastra_logo.jpg")}
style={{
maxHeight: 150,
alignSelf: "center",
maxWidth: 215,
flex: 1
}}
/>
<ImageBackground
resizeMode="cover"
blurRadius={3}
source={require("../assets/frond.jpg")}
style={{ alignSelf: "stretch", height: 500, marginBottom: 20 }}
>
{this.props.passedForm}
</ImageBackground>
</Content>
</Container>
);
}
}

You could fix it by passing the <LoginForm /> component instead of LoginForm.
But this is a good use case for the children property:
In Login.js, you can render:
render() {
return (
<Index>
<LoginForm />
</Index>
);
}
Then you can display the form in Index.js using:
{this.props.children}

You can pass it to variable and then use that variable to render
const PassedForm = this.props.passedForm;
And then render it like you would usually render components
<PassedForm />

React native use a local font on snack.expo.io

How can I use a local font on snack.expo.io?
I have a ttf font, which I would like to use as evidence on snack.expo.io, but I do not quite understand how I could do it.
Some advice?

When you are creating your snack you can import files. You can see beside Project there are three vertical dots, click that takes you to the import menu.
Selecting Import files will take you to this screen where you can either browse or drag and drop your files. I prefer to drag and drop.
You can then drag the files to the folder that you wish them to be located in.
Then to use your custom font you can follow the guide in the documentation.
https://docs.expo.io/versions/latest/guides/using-custom-fonts/
Here is a quick code example.
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, Font } from 'expo';
// You can import from local files
export default class App extends React.Component {
// <- use the button on the left, three vertical dots to import files
// set the initial state
state = {
fontLoaded: false
}
async componentDidMount() {
// load fonts
await this.loadFonts();
}
loadFonts = async () => {
// load the font
await Font.loadAsync({
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});
this.setState({fontLoaded: true})
}
render() {
// use the font in your text components
// only render the Text component when the font has been loaded.
return (
<View style={styles.container}>
{this.state.fontLoaded ? (<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
Hello, world!
</Text>) : null}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
});
And an accompanying snack to show it working, notice I have stored my fonts in the folder ./assets/fonts/ https://snack.expo.io/#andypandy/custom-font

What is the right way to communicate between child and parent component to change view content in Parent in react-native?

I have a child component where I have a button.
Now I have three of these child components placed next to each other in one Parent component.
Whenever any of these child comp is touched, I wish to change stuff in my parent component. So whenever the button is clicked, I wish to change state (or whatever is the way to do it) in parent and then go on and change the list that. I am loading in another child component used in parent. But when I press those buttons, my app just freezes after 3-4 clicks every time.
I thought maybe I am doing something very basic wrong. Like using the state/prop wrong and sending the app to infinite loop or something.
Parent Component:
export default class Dash extends PureComponent {
constructor(){
super();
// Bind the this context to the handler function
this.state = {
activeAuctionsCount: 15,
wonAuctionsCount: 10,
convertedLeadsCount: 6,
isActiveAuctionsSelected: true,
iswonAuctionsSelected: false,
isconvertedLeadsSelected: false,
cardSelected: 'auctions', /* auctions/won/leads */
};
this.loadActiveAuctions = this.loadActiveAuctions.bind(this);
this.loadWonAuctions = this.loadWonAuctions.bind(this);
this.loadconvertedLeads = this.loadconvertedLeads.bind(this);
}
// This method will be sent to the child component
loadActiveAuctions() {
console.log('active pressed');
this.setState({
cardSelected: 'auctions'
});
}
loadWonAuctions() {
console.log('won pressed');
this.setState({
cardSelected: 'won'
});
}
loadconvertedLeads() {
console.log('leads pressed');
this.setState({
cardSelected: 'leads'
});
}
render() {
return (
<DealerShipDashStatsCard
statCardLayoutPath={statCardLeft}
statCardTitle={'NOW'+"\n"+'SHOWING'}
statValue={this.state.activeAuctionsCount}
isSelected={this.state.isActiveAuctionsSelected}
action={this.loadActiveAuctions}
/>
</View>
Child Component:
export default class DealershipDash_StatsCard extends Component {
render() {
console.log("Rendering DashStat Card "+ this.props.statCardTitle);
return (
<ImageBackground
source={this.props.statCardLayoutPath}
style={styles.stat_card}
resizeMode="cover"
resizeMethod="resize">
<View style={styles.cardTop}></View>
<View style={styles.cardBottom}>
<View style={styles.cardStatTitle}>
<Text style={[styles.statTitleText]}>{this.props.statCardTitle}</Text>
</View>
<View style={styles.cardStatValue}>
<Text style={styles.cardStatValueText}>{this.props.statValue}</Text>
</View>
<View style={styles.cardButton}>
<Image
source={this.props.isSelected ? cardButtonActive : cardButtonInactive }
style = {this.props.isSelected ? styles.stat_card_button : styles.stat_card_button_inactive}/>
</View>
</View>
<Button onPress={this.props.action} title="press"/>
</ImageBackground>
);
}
}
Is there anything I'm doing wrong or not the react way? (this is my First project with react)
I am also sometimes getting Possible EventEmitter memory leak detected warning in my metro bundler. When i check console, I see everything is getting re-rendered on every click, maybe that's making it so slow that it finally gives up?

Every things looks pretty good but if you add the default props for child it will become more readable for other developers.

I solved this problem, eventually. I was not using PureComponent for the header component that had a ticking clock. This made the header (with a few images inside) re-render entirely every second. As a result, JS frame rate for my app was dropping too low, hence the freezing.

React native drawer menu: can`t find variable styles

I am trying to create a slider menu with the react-native-drawer-menu module. After installing the module . get an error can`t find variable styles. This is the code copied from the example:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux'
import'../I18n/I18n.js';
import RootContainer from './RootContainer'
import createStore from '../Redux'
import Drawer from 'react-native-drawer-menu';
import {Easing} from 'react-native'; // Customize easing function (Optional)
// create store
const store = createStore()
export default class App extends React.Component {
render() {
// prepare your drawer content
var drawerContent = (<View style={styles.drawerContent}>
<View style={styles.leftTop}/>
<View style={styles.leftBottom}>
<View><Text>Drawer Content</Text></View>
</View>
</View>);
var customStyles = {
drawer: {
shadowColor: '#000',
shadowOpacity: 0.4,
shadowRadius: 10
},
mask: {}, // style of mask if it is enabled
main: {} // style of main board
};
return (
<Drawer
style={styles.container}
drawerWidth={300}
drawerContent={drawerContent}
type={Drawer.types.Overlay}
customStyles={{drawer: styles.drawer}}
drawerPosition={Drawer.positions.Right}
onDrawerOpen={() => {console.log('Drawer is opened');}}
onDrawerClose={() => {console.log('Drawer is closed')}}
easingFunc={Easing.ease}
>
<View style={styles.content}>
<Text>{Object.values(Drawer.positions).join(' ')}</Text>
<Text>{Object.values(Drawer.types).join(' ')}</Text>
</View>
</Drawer>
);
}
}
If I delete the variable from the code then the slide menu works but looks extremely bad.
Do you think that I am supposed to create the style of the menu on my own or shall I imported from somewhere? If I have to create it, how can I know which parameters did it take? Or is it a normal view?

Looks like you have to add styles by yourself to make look Drawer content exactly as you want to. To achieve it you have to create Stylesheet
You can use this answer to get more info about React Native Stylesheet properties (it's pretty much similar to css)
Also maybe this example from drawer repo would be helpful
Cheers.