Not rendering correctly in my expo app

[kadanes]

trafficstars

I tried running a basic example.

Created copy variable in my class constructor, and tried rendering it using Markdown component.

this.copy = `
### h1 Heading 8-)
## h2 Heading 8-)
`;

But I don't see any styling, and all the content on the new line goes inside a box.

This is what I see:

This is my code:

import React, { Component } from "react";
import { StyleSheet, Button, StatusBar, View, TextInput, Platform } from "react-native";
import { Icon, Input } from "react-native-elements";
import Modal from "react-native-modal";
import { SafeAreaView } from "react-navigation";
import ScreenName from "./ScreenName";
import ScreenNames from "../constants/ScreenNames";
import Colors from "../constants/Colors";
import FilterMenu from "./filter_menu/FilterMenu";
import { FontAwesome } from "@expo/vector-icons";
import Markdown from "react-native-markdown-renderer";

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "center",
    width: "100%",
  },
  filterModal: {
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    marginTop: 50,
  },
  searchBar: {
    borderColor: Colors.GrayAccent,
    borderRadius: 5,
    borderWidth: 1,
    height: 25,
  },
  searchIcon: {
    color: Colors.GrayAccent,
    fontSize: 10,
    marginRight: 10,
  },
  searchInput: {
    fontSize: 12,
  },
});

export default class RequestBulletin extends Component {
  constructor(props) {
    super(props);

    this.state = {
      titleFilterText: "",
      filterMenuOpen: false,
    };

    this.copy = `
    ### h1 Heading 8-) 
    ## h2 Heading 8-)
    `;
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{ flexDirection: "row", marginLeft: 20, marginRight: 20 }}>
          <Input
            placeholder="Search"
            inputStyle={styles.searchInput}
            inputContainerStyle={styles.searchBar}
            placeholderTextColor={Colors.GrayAccent}
            leftIcon={<FontAwesome name="search" style={styles.searchIcon} />}
            onChangeText={(titleFilterText) => this.setState({ titleFilterText })}
          />

          <Icon
            type="font-awesome"
            name="sliders"
            size={20}
            color={Colors.GrayAccent}
            onPress={() => {
              this.setState((prevState) => ({
                filterMenuOpen: !prevState.filterMenuOpen,
              }));
            }}
          />
        </View>

        <ScreenName ScreenName="Bullentin" />
        <Button
          title="Dashboard"
          onPress={() => {
            this.props.navigation.navigate(ScreenNames.Dashboard, {
              calledFrom: ScreenNames.Bulletin,
            });
          }}
          style={{ width: "200" }}
        />
        <Modal isVisible={this.state.filterMenuOpen} style={styles.filterModal}>
          <FilterMenu
            closeAction={() => {
              this.setState({ filterMenuOpen: false });
            }}
          />
        </Modal>

        <Markdown>{this.copy}</Markdown>
      </SafeAreaView>
    );
  }
}

[constantlahousse]

Hello @parthv21,

I encountered the same issue, removing space indent inside my markdown block fixed this.

So

constructor(props) {
    super(props);

    this.state = {
      titleFilterText: "",
      filterMenuOpen: false,
    };

    this.copy = `
    ### h1 Heading 8-) 
    ## h2 Heading 8-)
    `;
}

would become :

constructor(props) {
    super(props);

    this.state = {
      titleFilterText: "",
      filterMenuOpen: false,
    };

    this.copy = `
### h1 Heading 8-) 
## h2 Heading 8-)
    `;
}

I know this is not super clean when you're reading the file, but it works! 😬