score:1
<view style={styles.imagecancel}>
<touchableopacity onpress={() => { this.setmodalvisible(!this.state.visible) }}>
<text style={styles.textcancel} >close</text>
</touchableopacity>
</view>
const styles = stylesheet.create({
imagecancel: {
height: 'auto',
width: 'auto',
justifycontent:'center',
backgroundcolor: '#000000',
alignitems: 'flex-end',
},
textcancel: {
paddingtop:25,
paddingright:25,
fontsize : 18,
color : "#ffffff",
height: 50,
},
}};
score:1
just add alignself
to the text style, it won't take the whole width
<view style={{flex: 1}}>
<text style={{alignself: 'center'}}>{'your text here'}</text>
<text style={{alignself: 'baseline'}}>{'your text here'}</text>
<text style={{alignself: 'flex-end'}}>{'your text here'}</text>
<text style={{alignself: 'flex-start'}}>{'your text here'}</text>
</view>
these worked for me
score:4
it works with nicholas answer unless you want to center the view somewhere. in that case, you could add a wrapper view around the view to obtain the width of its content and set alignitems: 'center'
. like this:
<view style={{ flex: 1, alignitems: 'center' }}>
<view style={{ justifycontent: 'center', alignitems: 'center', backgroundcolor: 'red' }}>
<text>{'your text is here'}</text>
</view>
</view>
the background color is added to show the size of the inner view
score:8
try this way for your requirement:
here my height is constant and i am enlarging the width by the length of text.
<view style={{flexdirection: 'row'}}>
<view style={{
height: 30, width: 'auto', justifycontent:'center',
alignitems: 'center'}}>
<text style={{color:'white'}}>now view will enlarge byitself</text>
</view>
</view>
for both height and width try changing the height inside the view style to 'auto' full code bellow:
<view style={{flexdirection: 'row'}}>
<view style={{
height: 'auto', width: 'auto', justifycontent:'center',
alignitems: 'center'}}>
<text style={{color:'white'}}>now view will enlarge byitself</text>
</view>
</view>
also try giving padding to the view for arrange the text properly.
score:11
or simply:
<text style={{color: '#ffffff', alignself: 'center'}}>sample text here</text>
score:13
this work for me.
<view style={{alignself: 'flex-start', backgroundcolor: 'red'}}>
<text>abc</text>
</view>
score:21
if you want to apply width to view
based on <text>
, you can do something like this :
<view style={styles.container}>
<text>
{text}
</text>
</view>
const styles = stylesheet.create({
container: {
flexdirection:"row",
alignself:"flex-start",
paddingtop: constants.statusbarheight,
backgroundcolor: '#ecf0f1',
padding: 8,
}
});
score:23
tldr: set alignitems
to any value other than 'stretch'
for the style of the parent view of your view containing text
the issue your facing is likely related to react native's default value for alignitems: 'stretch'
on a <view />
element. basically, all <view />
elements by default cause their children to stretch along the cross axis (axis opposite to the flexdirection
). setting alignitems
to any value other than "stretch"
("baseline", "flex-start", "flex-end", or "center") on the parent view prevents this behavior and addresses your problem.
below is an example where there are two view elements contained inside of a parent view with a blue border. the two view elements each contain a view wrapped around a text element. in the case of the first view with default styling, the yellow child view expands horizontally to fill the entire width. in the second view where alignitems: 'baseline'
, the pink view does not expand and stays the size of it's child text element.
<view style={{ borderwidth: 5, bordercolor: 'blue' }}>
<view>
<view style={{ backgroundcolor: 'yellow' }}>
<text style={{ fontsize: 30 }}>hello</text>
</view>
</view>
<view style={{ alignitems: 'baseline' }}>
<view style={{ backgroundcolor: 'pink' }}>
<text style={{ fontsize: 30 }}>hello</text>
</view>
</view>
</view>
the align-items
property is explained well here.
score:57
two solutions
text component fits the text content
https://facebook.github.io/react-native/docs/text.html#containers
you can wrap <text>
components into another <text>
component.
by doing this everything inside is no longer using the flexbox layout but using text layout.
<text>
<text>{'your text here'}</text>
</text>
view container adapt to nested text component's content
in that case you need to use the props alignself
in order to see the container shrink to the size of its content.
<view>
<view style={{ alignself: 'center', padding: 12}} >
<text>{'your text here'}</text>
</view>
</view>
score:357
"alignself" does the same as 'display: inline-block' would in common html/css and it works very well for me.
<view style={{backgroundcolor: '#000000', alignself: 'flex-start' }}>
<text style={{color: '#ffffff'}}>
sample text here
</text>
</view>
Source: stackoverflow.com
Related Query
- React-native view auto width by text inside
- react native Scroll View doesn't scroll from inside text input
- React Native Android error trying to nest a view inside a text
- Make view 80% width of parent in React Native
- Scroll View inside view not working react native
- Wrap children inside view React native
- React Stripe Elements - set width to auto for iFrame? Elements invisible inside grid and modal
- React native text going off my screen, refusing to wrap. What to do?
- How to set image width to be 100% and height to be auto in react native?
- Checking text appears inside an element using react testing library
- How to adjust font size to fit view in React Native for Android?
- React native text component using number of lines
- React Native multi line TextInput, text is centered
- React Select auto size width
- Forcing onLayout on React Native view
- Show only the 1st line of text in React Native
- Text is getting cut off in android for react native
- Center a text in the screen with react native
- React native (expo) web view Error net::ERR_CACHE_MISS
- Unload / Release / Remove React Native View from runtime
- Detect tap on the outside of the View in react native
- detect when another view is touched - dragging with PanResponder in react native
- Full text is not showing in alert dialog in react native
- React Native Text color not working
- React Native Testing Library doesn't find text even though its in debug
- React native layout fixed width and stretch remaining space
- React Bootstrap adjust width of text inputs
- Android - Hide text cursor input React Native
- uri image is not rendering in React native Image view
- Add text inside doughnut chart from chart js-2 in react
More Query from same tag
- Toggle extra inputs when a specific file type is selected
- Setting the initial value of a useState hook before useState is executed
- Problem importing amplify into my project
- save data using hooks
- why wont jsx render firestore data
- Webpack Unexpected token SyntaxError
- Equivalent of Ahead Of Time Compilation in React
- React props return as undefined
- Adding CSS styling to React Native WebView
- How to get the event target inside the parent component in ReactJS
- Route to URL in React component
- How to get value from Multiple Checkbox to array in react?
- React component: Simulate standard HTML <input/> API
- Check username or phone already exist (front)
- Adding (existing data) to Array in Formik
- Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware with redux tool
- How do I pass a function to a child component using react-router
- Empty state from a handler function in React (with datatables)
- DELETE user Express side works, but can't make it work on front-end side (using React)
- Autodesk Forge Viewer and React components
- React typescript snowpack - can't import .webp
- React.js how to extract out a method when two components take in the same parameters?
- How to use Observable.if correctly in redux-observable?
- How to disable onClick function on a single table row?
- nth-child(odd) affecting all children instead of odd
- React - can I find out if a component is currently visible
- Autoplay is removed from HTML after rendering
- How do I override a MaterialUI outlined input through a global theme overrides file?
- Add Class to multiple Objects in ReactJS when clicked
- Showing an Invalid Date, how can I fix this?