How to make card rounded shape in react native, native base

react-native native-base

11,944

Well, no one actually could answer this, but somehow luckily on github I found this:

import React, { Component } from "react";
import { Container, Header, Title, Content, Button, Icon, Card, CardItem, Text, Body, Left, Right, IconNB, View } from "native-base";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      loading: true
     };
  }
  static navigationOptions = {
    header:null
  };

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
    });
    this.setState({ loading: false });
  }
  render() {
    if (this.state.loading) {
      return <Expo.AppLoading />;
    }
    else
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <Content padder>
          <Card style={{ borderRadius: 8 }}>
            <CardItem header bordered style={{ borderTopLeftRadius: 8, borderTopRightRadius: 8 }}>
              <Text>NativeBase</Text>
            </CardItem>
            <CardItem bordered>
              <Body>
                <Text>
                  NativeBase is a free and open source framework that enable
                  developers to build
                  high-quality mobile apps using React Native iOS and Android
                  apps
                  with a fusion of ES6.
                </Text>
              </Body>
            </CardItem>
            <CardItem bordered>
              <Body>
                <Text>
          NativeBase builds a layer on top of React Native that provides
                  you with
                  basic set of components for mobile application development.
                </Text>
              </Body>
            </CardItem>
            <CardItem bordered>
              <Body>
                <Text>
                  Get on the mobile fast track with NativeBase, the
                  fastest-growing platform
                  and tool set for iOS and Android development.
                </Text>
              </Body>
            </CardItem>
            <CardItem footer bordered style={{ borderBottomLeftRadius: 8, borderBottomRightRadius: 8 }}>
              <Text>GeekyAnts</Text>
            </CardItem>
          </Card>
        </Content>
      </Container >
    );
  }
}

Thank you akhil-geekyants!!!! Here is the link to the original post

Here is another link related to image as background in card with rounded corners

11,944

anwesh mohapatra

Updated on June 15, 2022

Comments

anwesh mohapatra about 2 years

I'm using the native base components on top of react native and I was wondering how to get the cards be round instead of rectangular in the UI. Is there a rounded prop for that?
- Suraj Malviya over 5 years
  
  Have you tried borderRadius style property ? I have no prior experience with native base but borderRadius is react native's style property to give rounded corners. So if you have a square of 40x40 you should give borderRadius: 20 to get a complete circle. Hope that helps.
- anwesh mohapatra over 5 years
  
  Tried that out, did not work :(
Dhaval Jardosh over 4 years

thank you very very much, was stuck on this for hours.