Building Image Card in React NativeLazy load of images in ListViewHow do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a divLoop inside React JSXHide keyboard in react-nativeWhat is the difference between using constructor vs getInitialState in React / React Native?Programmatically navigate using react routerWhat is the difference between React Native and React?How to build stackable cards in React with react-swipe-card?Enable overflow in native-base cards
As a DM, how to avoid unconscious metagaming when dealing with a high AC character?
Why hasn't the U.S. government paid war reparations to any country it attacked?
How are "soeben" and "eben" different from one another?
Behavior of the zero and negative/sign flags on classic instruction sets
Equivalent definitions of total angular momentum
I quit, and boss offered me 3 month "grace period" where I could still come back
How to use "regular expression" to separate specific strings in Oracle
Why does the trade federation become so alarmed upon learning the ambassadors are Jedi Knights?
Are L-functions uniquely determined by their values at negative integers?
HackerRank: Electronics Shop
How to fit a linear model in the Bayesian way in Mathematica?
Does optical correction give a more aesthetic look to the SBI logo?
Cubic programming and beyond?
Redox reactions redefined
What exactly is the Tension force?
Could the crash sites of the Apollo 11 and 16 LMs be seen by the LRO?
What is the German equivalent of 干物女 (dried fish woman)?
Does entangle require vegetation?
Did the Shuttle's rudder or elevons operate when flown on its carrier 747?
How do I define this subset using mathematical notation?
Published paper containing well-known results
Is `curl something | sudo bash -` a reasonably safe installation method?
Construct a pentagon avoiding compass use
Does ability to impeach an expert witness on science or scholarship go too far?
Building Image Card in React Native
Lazy load of images in ListViewHow do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a divLoop inside React JSXHide keyboard in react-nativeWhat is the difference between using constructor vs getInitialState in React / React Native?Programmatically navigate using react routerWhat is the difference between React Native and React?How to build stackable cards in React with react-swipe-card?Enable overflow in native-base cards
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I'm trying to build a simple image card component in React Native and got some problems. This is my component now (It's available for you on snack):
- I can't find a way to set border only on the top of the image on the card, keeping the bottom border flat.
Desired form:
- The Image component doesn't seen to be rendered from the top showing the model's face, instead it's getting centered showing her body.
Here it's the original image for comparison:
reactjs image react-native mobile components
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
add a comment |
I'm trying to build a simple image card component in React Native and got some problems. This is my component now (It's available for you on snack):
- I can't find a way to set border only on the top of the image on the card, keeping the bottom border flat.
Desired form:
- The Image component doesn't seen to be rendered from the top showing the model's face, instead it's getting centered showing her body.
Here it's the original image for comparison:
reactjs image react-native mobile components
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
add a comment |
I'm trying to build a simple image card component in React Native and got some problems. This is my component now (It's available for you on snack):
- I can't find a way to set border only on the top of the image on the card, keeping the bottom border flat.
Desired form:
- The Image component doesn't seen to be rendered from the top showing the model's face, instead it's getting centered showing her body.
Here it's the original image for comparison:
reactjs image react-native mobile components
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
I'm trying to build a simple image card component in React Native and got some problems. This is my component now (It's available for you on snack):
- I can't find a way to set border only on the top of the image on the card, keeping the bottom border flat.
Desired form:
- The Image component doesn't seen to be rendered from the top showing the model's face, instead it's getting centered showing her body.
Here it's the original image for comparison:
reactjs image react-native mobile components
reactjs image react-native mobile components
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
asked Mar 26 at 6:32
André MonteiroAndré Monteiro
471 gold badge1 silver badge7 bronze badges
471 gold badge1 silver badge7 bronze badges
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Use this code. Added overflow: "hidden" to the View and removed borderRadius for Image. Tested in IOS.
import * as React from 'react';
import Text, View, Image from "react-native";
export default class RootComponent extends React.Component
render()
return (
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" >
<View>
<Image
source=require("./assets/h4.jpg")
style=
height: 135,
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
);
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
add a comment |
By removing the height from the <Image> and setting it in its parent view, the image will be shown from the top.
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' >
<View style= height: 135, width: 155, overflow: 'hidden' >
<Image
source=require("./assets/h4.jpg")
style=
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
2
Since it was two questions inside one I've selected the first posted to be correct. But this is correct too since it will render the image from top. Thank you !
– André Monteiro
Mar 26 at 23:29
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55351050%2fbuilding-image-card-in-react-native%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use this code. Added overflow: "hidden" to the View and removed borderRadius for Image. Tested in IOS.
import * as React from 'react';
import Text, View, Image from "react-native";
export default class RootComponent extends React.Component
render()
return (
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" >
<View>
<Image
source=require("./assets/h4.jpg")
style=
height: 135,
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
);
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
add a comment |
Use this code. Added overflow: "hidden" to the View and removed borderRadius for Image. Tested in IOS.
import * as React from 'react';
import Text, View, Image from "react-native";
export default class RootComponent extends React.Component
render()
return (
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" >
<View>
<Image
source=require("./assets/h4.jpg")
style=
height: 135,
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
);
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
add a comment |
Use this code. Added overflow: "hidden" to the View and removed borderRadius for Image. Tested in IOS.
import * as React from 'react';
import Text, View, Image from "react-native";
export default class RootComponent extends React.Component
render()
return (
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" >
<View>
<Image
source=require("./assets/h4.jpg")
style=
height: 135,
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
);
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
Use this code. Added overflow: "hidden" to the View and removed borderRadius for Image. Tested in IOS.
import * as React from 'react';
import Text, View, Image from "react-native";
export default class RootComponent extends React.Component
render()
return (
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" >
<View>
<Image
source=require("./assets/h4.jpg")
style=
height: 135,
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
);
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
answered Mar 26 at 6:43
Sibiraj PRSibiraj PR
1,2831 gold badge9 silver badges24 bronze badges
1,2831 gold badge9 silver badges24 bronze badges
add a comment |
add a comment |
By removing the height from the <Image> and setting it in its parent view, the image will be shown from the top.
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' >
<View style= height: 135, width: 155, overflow: 'hidden' >
<Image
source=require("./assets/h4.jpg")
style=
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
2
Since it was two questions inside one I've selected the first posted to be correct. But this is correct too since it will render the image from top. Thank you !
– André Monteiro
Mar 26 at 23:29
add a comment |
By removing the height from the <Image> and setting it in its parent view, the image will be shown from the top.
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' >
<View style= height: 135, width: 155, overflow: 'hidden' >
<Image
source=require("./assets/h4.jpg")
style=
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
2
Since it was two questions inside one I've selected the first posted to be correct. But this is correct too since it will render the image from top. Thank you !
– André Monteiro
Mar 26 at 23:29
add a comment |
By removing the height from the <Image> and setting it in its parent view, the image will be shown from the top.
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' >
<View style= height: 135, width: 155, overflow: 'hidden' >
<Image
source=require("./assets/h4.jpg")
style=
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
By removing the height from the <Image> and setting it in its parent view, the image will be shown from the top.
<View style= flex: 1, alignItems: "center", justifyContent: "center" >
<View style= backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' >
<View style= height: 135, width: 155, overflow: 'hidden' >
<Image
source=require("./assets/h4.jpg")
style=
width: 155
/>
</View>
<View style= padding: 10, width: 155 >
<Text>Title</Text>
<Text style= color: "#777", paddingTop: 5 >
Description of the image
</Text>
</View>
</View>
</View>
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
answered Mar 26 at 8:12
MiloreMilore
1,1571 gold badge6 silver badges15 bronze badges
1,1571 gold badge6 silver badges15 bronze badges
2
Since it was two questions inside one I've selected the first posted to be correct. But this is correct too since it will render the image from top. Thank you !
– André Monteiro
Mar 26 at 23:29
add a comment |
2
Since it was two questions inside one I've selected the first posted to be correct. But this is correct too since it will render the image from top. Thank you !
– André Monteiro
Mar 26 at 23:29
2
2
Since it was two questions inside one I've selected the first posted to be correct. But this is correct too since it will render the image from top. Thank you !
– André Monteiro
Mar 26 at 23:29
Since it was two questions inside one I've selected the first posted to be correct. But this is correct too since it will render the image from top. Thank you !
– André Monteiro
Mar 26 at 23:29
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55351050%2fbuilding-image-card-in-react-native%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
