how to make lable horizontally center .I used textAlign:'center'.But it is not working .here is my code
https://rnplay.org/apps/ZN2gvA
'use strict';
import React from 'react-native';
const {
AppRegistry,
Component,
Text,
View
}=React;
const styles=React.StyleSheet.create({
container:{
paddingTop:20,
textAlign:'center',
},
label:{
color:'blue',
backgroundColor:'red'
}
})
class SampleApp extends Component{
render(){
return (<View style={styles.container}><Text style={styles.label}>hello</Text></View>)
}
}
AppRegistry.registerComponent('SampleApp', () => SampleApp);
You should pay a little more attention to the warnings that React Native is giving you:
The style textAlign: 'center' works only for Text components. Please look at the styles documentation for View and Text.
In your case remove textAlign: 'centre' from container and add it to label. Check out the changes I made at https://rnplay.org/apps/RQX5Fw
Related
There are two questions already on Stackoverflow:
Create Horizontal Timeline With
React How to create responsive horizontal timeline
None of them have any accepted answer. And also my question is specifically related to react-horizontal-timeline.
I'm creating my personal portfolio and I wish to show my education/college journey.
The author has given the code:
const VALUES = [ /* The date strings go here */ ];
export default class App extends React.Component {
state = { value: 0, previous: 0 };
render() {
return (
<div>
{/* Bounding box for the Timeline */}
<div style={{ width: '60%', height: '100px', margin: '0 auto' }}>
<HorizontalTimeline
index={this.state.value}
indexClick={(index) => {
this.setState({ value: index, previous: this.state.value });
}}
values={ VALUES } />
</div>
<div className='text-center'>
{/* any arbitrary component can go here */}
{this.state.value}
</div>
</div>
);
}
}
Since I'm coming from Angular and MVC frameworks, I didn't understand what this HorizontalTimeline is doing there. Is there anything I need to import? I'm asking this because the code is giving this error:
Line 13:22: 'HorizontalTimeline' is not defined react/jsx-no-undef
Looks like the compiler is not able to recognize HorizontalTimeline.
And also I would like to have it as a separate component for example <MyTimeline> or so. Why would I clutter my App.js. Hope I was able to explain. Please pitch in.
You need to import the component.
Unfortunately the vendor's documentation doesn't include the import statement. Further unfortunately still, the vendor's demo imports it directly from their source code. Which is fine if you're using their source code, but useless if you're installing their npm package.
Unless the IDE can find the import for you (VS Code should be able to, but anything could be preventing that) then best guesses would be:
import HorizontalTimeline from 'react-horizontal-timeline';
or:
import { HorizontalTimeline } from 'react-horizontal-timeline';
Check out this timeline component if you are interested. I think it's better for your need and also has much more clear documentation and a better horizontal mode.
react-chrono
Here is an example of a responsive timeline using the react-chrono component. I have also added some code that will automatically change to the vertical mode which is better for mobile view.
import React from "react";
import { Chrono } from "react-chrono";
class EducationTimeline extends React.Component {
constructor(props) {
super(props);
this.state = { matches: window.matchMedia("(min-width: 768px)").matches };
}
componentDidMount() {
const handler = (e) => this.setState({ matches: e.matches });
window.matchMedia("(min-width: 768px)").addEventListener("change", handler);
}
render() {
const items = [
{
title: "example",
cardTitle: "example",
cardSubtitle: "example",
cardDetailedText: "example",
}
];
return (
<div style={{ width: "500px", height: "400px" }}>
<Chrono
items={items}
mode={this.state.matches ? "HORIZONTAL" : "VERTICAL"}
slideShow={false}
itemWidth={"250"}
hideControls={true}
cardHeight={100}
borderLessCards={true}
theme={{
primary: "#01bf71",
secondary: "#010606",
cardBgColor: "#f7f8fa",
cardForeColor: "#010606",
titleColor: "#fff",
}}
></Chrono>
</div>
);
}
}
export default EducationTimeline;
I tried using different properties in the sidebar style to override the link color but nothing is working.
Default style/color of Sidebar drawer (before overriding the style)
MySidebar.js
// MySidebar.js
import { Sidebar } from 'react-admin';
import { makeStyles } from '#material-ui/core/styles';
import React from 'react';
const useSidebarStyles = makeStyles({
drawerPaper: {
backgroundColor: '#0c2d48',
color: '#fff',
},
});
const MySidebar = props => {
const classes = useSidebarStyles();
return (
<Sidebar classes={classes} {...props} />
);
};
export default MySidebar;
MyLayout.js
// MyLayout.js
import React from 'react';
import { Layout } from 'react-admin';
import MySidebar from './MySidebar';
const MyLayout = props => (
<Layout
{...props}
sidebar={MySidebar}
/>
);
export default MyLayout;
Result (after overriding the default style in MySidebar.js)
As you can see, I'm able to change bg color of the sidebar but not the link colors.
Please help. It's driving me crazy!
You can create your own theme as described here:
https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme
and in your theme redefine the colors of all MenuItemLink components:
export const lightTheme = {
...
overrides: {
RaMenuItemLink: {
root: {
color: "#c51162",
},
active: {
color: "#ff4081",
},
},
},
}
I can see that you are using React-Admin for the sidebar and not the Material UI sidebar directly. So possibly the React-Admin template modified the props of original material Ui and you should take a look inside the react admin sidebar and modify it directly there to get the results. If you apply material UI customization on this one, it might be the reason its not working.
Alternative is to try Material UI Themeing with ThemeProvider and apply the theme, which can overwrite the current styling.
Try changing link colors.
drawerPaper: {
backgroundColor: '#0c2d48',
color: '#fff',
},
link: {
color: '#fff',
},
Update: Instead of link you can give it the css class name, by looking at inspect element on the ouput sidebar.
I wrote a Logout button component in my React app for which I wish to locate at the top right corner of the screen.
render() {
<LogoutButtonComponent height: , backgroudColor: />
}
It wouldn't let me assign any values for height and etc.
This is the Logout component:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class LogOutButton extends Component {
static contextTypes = {
store: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onLogout();
};
render() {
return <button type="button" onClick={this.handleClick}>Logout</button>;
}
}
Should I locate it by < col /> ?
To add inline styles, you should defined a style object as prop, and pass it values, like doniyor2109 mentioned. There are a few caveats to using this, however.
style={{ height: 100, height: '100px', height: '100%', minHeight: '100px'}}.
Not every value should be passed as integer, some need to be passed as a string
Not every css attribute gets passed as you would expect them to, the css min-height actually gets passed as minHeight, so replace all hyphens with lower camel case style
Inline styles get insanely difficult to manage. I suggest you at the very least create an object outside the component, and pass it in like:
const DivStyle = { minHeight: '100px' }
and then:
<LogoutButtonComponent style={DivStyle} />
You can prefix that DivStyle with an export if you want to import {DivStyle} from './somefile' in other places
I suggest you check out a library like styled-components as it makes styling much easier!
I suggest you check out this article which outlines your options
You don't really add styles to your component like that. It's better to add those styles in the source for the actual component. So how exactly do you want it displayed? I will provide a template kind of and you can change it to what you want.
Go to your source for your Logout Button Component. In the return of your render method try adding a div call it container. Then add styling in a css file to that div or if you are using react-bootstrap or reactstrap or #material/ui/core you can adjust the style according to their documentation.
You can add your css for the className .container to make it appear the way you would like.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class LogOutButton extends Component {
static contextTypes = {
store: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onLogout();
};
render() {
return (
<div className="container">
{* notice the className here *}
<button type="button" onClick={this.handleClick}>Logout</button>
</div>
)
}
}
Hope this helps.
I am using React Navigation and want to Hide/Show the header onScroll or onPress. Is this pseudo code the proper way to go about it? Also, could you please advice on what props do I need to pass and how do I pass them from the _handleHide and _handleShow functions?
import React, { Component } from 'react'
import { View, Text, StyleSheet, Button} from 'react-native'
class MyApp extends Component {
static navigationOptions = {
title: 'MyTitle' // this is the header I want to hide/show
}
constructor () {
super(props);
this.state = {
showHeader: false
}
this._handleHide = this._handleHide.bind(this);
this._handleShow = this._handleShow.bind(this);
}
_handleHide(){
// how do i code this to hide the header?
}
_handleShow(){
// how do i code this to show the header?
}
render(){
return(
<View style={styles.container}>
<Button onPress={this._handleHide} title="Hide Header" />
<Button onPress={this._handleShow} title="Show Header" />
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex: 1, justifyContent: 'center', alignItems: 'center'
}});
export default MyApp;
Many thanks.
UPDATE 1
_handleHide(){
this.setState({showHeader: false});
}
_handleShow(){
this.setState({showHeader: true});
}
There is no on state change for that post I mentioned. Not near a computer right now but I would add a state in the constructor called showHeader: true and in _handleHide and _handleShow, change the state of showHeader.
Then from the post Dynamically hide/show header in react-native:
this.props.navigation.setParams({
header: this.state.showHeader ? whatever-you-want : null
})
I am using react-navigation. In DrawerContent I've added all needed things to make drawer's background green while it covers only a half of the drawer. Here is the code and image of the drawer.
Here is the image
import React, { Component } from "react";
import { View, ScrollView,Button,Text,StyleSheet } from "react-native";
import { DrawerItems } from 'react-navigation';
const DrawerContent = (props) => (
<View style={style.container}>
<DrawerItems {...props} />
</View>
);
const style = StyleSheet.create({
container: {
flex:1
height: null,
backgroundColor: '#00FF00',
},
});
export default DrawerContent;
I believe the problem lies with the DrawerContent object. You should try giving that object the style that you want...
You are creating an object DrawerContent with the object View inside of it and giving it the style. In this case the View object might be smaller than the DrawerContent object...